<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>悦音阁 - 音乐搜索与播放平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        :root {
            /* 深色主题变量 */
            --primary: #1db954;
            --primary-dark: #1aa34a;
            --primary-light: #1ed760;
            --secondary: #9c27b0;
            --dark: #121212;
            --dark-light: #181818;
            --dark-lighter: #282828;
            --light: #ffffff;
            --gray: #b3b3b3;
            --gray-dark: #535353;
            --gray-darker: #3e3e3e;
            --success: #1db954;
            --warning: #ffa726;
            --error: #f44336;
            --card-bg: rgba(40, 40, 40, 0.6);
            --glass-bg: rgba(255, 255, 255, 0.05);
            --sidebar-width: 240px;
            --player-height: 90px;
            --bg-gradient: linear-gradient(135deg, #121212 0%, #181818 50%, #282828 100%);
            /* 歌词相关颜色变量 */
            --lyrics-bg: rgba(0, 0, 0, 0.9);
            --lyrics-text: #ffffff;
            --lyrics-current: #1db954;
            --lyrics-highlight: rgba(29, 185, 84, 0.1);
        }

        /* 浅色主题变量 */
        [data-theme="light"] {
            --primary: #1db954;
            --primary-dark: #1aa34a;
            --primary-light: #1ed760;
            --secondary: #9c27b0;
            --dark: #f5f5f5;
            --dark-light: #ffffff;
            --dark-lighter: #f0f0f0;
            --light: #121212;
            --gray: #666666;
            --gray-dark: #b3b3b3;
            --gray-darker: #e0e0e0;
            --success: #1db954;
            --warning: #ffa726;
            --error: #f44336;
            --card-bg: rgba(255, 255, 255, 0.8);
            --glass-bg: rgba(0, 0, 0, 0.05);
            --bg-gradient: linear-gradient(135deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
            /* 浅色模式歌词相关颜色变量 */
            --lyrics-bg: rgba(255, 255, 255, 0.95);
            --lyrics-text: #333333;
            --lyrics-current: #1db954;
            --lyrics-highlight: rgba(29, 185, 84, 0.1);
        }

        body {
            background: var(--bg-gradient);
            color: var(--light);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            transition: background 0.3s ease, color 0.3s ease;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--dark-lighter);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gray-dark);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--gray);
        }

        /* 主布局 */
        .main-container {
            display: flex;
            flex: 1;
            padding-bottom: var(--player-height);
        }

        /* 侧边栏 */
        .sidebar {
            width: var(--sidebar-width);
            background-color: var(--dark);
            height: calc(100vh - var(--player-height));
            position: fixed;
            left: 0;
            top: 0;
            padding: 20px 10px;
            overflow-y: auto;
            z-index: 10;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, background-color 0.3s ease;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 700;
            color: var(--light);
            padding: 0 15px 20px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--gray-darker);
        }

        .logo i {
            color: var(--primary);
            font-size: 28px;
        }

        .nav-section {
            margin-bottom: 25px;
        }

        .nav-title {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--gray);
            padding: 0 15px 10px;
        }

        .nav-links {
            list-style: none;
        }

        .nav-links li {
            margin-bottom: 5px;
        }

        .nav-links a {
            display: flex;
            align-items: center;
            gap: 15px;
            color: var(--gray);
            text-decoration: none;
            font-weight: 500;
            padding: 10px 15px;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-size: 14px;
            position: relative;
        }

        .nav-links a:hover, .nav-links a.active {
            color: var(--light);
            background-color: var(--gray-darker);
        }

        .nav-links a i {
            width: 20px;
            text-align: center;
            font-size: 18px;
        }

        .nav-links a.active {
            color: var(--light);
            background-color: var(--gray-darker);
        }

        .nav-links a.active i {
            color: var(--primary);
        }

        /* 积分和VIP指示器 */
        .points-indicator {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 5px;
            padding: 10px 15px;
            margin: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: white;
        }

        .points-value {
            font-weight: 700;
            font-size: 16px;
        }

        .vip-indicator {
            background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
            color: #000;
            border-radius: 5px;
            padding: 8px 12px;
            margin: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 700;
        }

        .vip-indicator i {
            font-size: 14px;
        }

        .vip-time {
            font-size: 10px;
            margin-left: auto;
        }

        /* 移动端菜单切换按钮 */
        .mobile-menu-toggle {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 18px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }

        /* 主内容区 */
        .content {
            flex: 1;
            margin-left: var(--sidebar-width);
            padding: 30px;
            min-height: calc(100vh - var(--player-height));
            transition: margin-left 0.3s ease, background-color 0.3s ease;
        }

        /* 顶部导航 */
        .top-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .search-container {
            background: var(--glass-bg);
            border-radius: 25px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 400px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            transition: background 0.3s ease;
        }

        [data-theme="light"] .search-container {
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .search-container input {
            background: none;
            border: none;
            color: var(--light);
            width: 100%;
            outline: none;
            font-size: 14px;
        }

        .search-container i {
            color: var(--gray);
        }

        .search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--dark-lighter);
            border-radius: 0 0 10px 10px;
            max-height: 200px;
            overflow-y: auto;
            display: none;
            z-index: 100;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            border: 1px solid var(--gray-darker);
        }

        .search-suggestion {
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 1px solid var(--gray-darker);
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--light);
        }

        .search-suggestion:hover {
            background: var(--gray-darker);
        }

        .search-suggestion i {
            color: var(--primary);
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(0, 0, 0, 0.3);
            padding: 5px 15px 5px 5px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
        }

        [data-theme="light"] .user-profile {
            background: rgba(0, 0, 0, 0.05);
        }

        .user-profile:hover {
            background: rgba(0, 0, 0, 0.5);
        }

        [data-theme="light"] .user-profile:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            overflow: hidden;
            position: relative;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-avatar .avatar-fallback {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: var(--dark);
            font-size: 14px;
            font-weight: bold;
        }

        .user-name {
            font-size: 14px;
            font-weight: 600;
        }

        .upgrade-btn {
            background: transparent;
            color: var(--light);
            border: 1px solid var(--light);
            padding: 8px 20px;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .upgrade-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.05);
        }

        [data-theme="light"] .upgrade-btn:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        /* 欢迎横幅 */
        .welcome-banner {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .welcome-text h1 {
            font-size: 28px;
            margin-bottom: 5px;
            color: white;
        }

        .welcome-text p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
        }

        .play-shuffle-btn {
            background: var(--light);
            color: var(--dark);
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .play-shuffle-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* 内容区域 */
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30px 0 20px;
        }

        .section-title h2 {
            font-size: 22px;
        }

        .see-all {
            color: var(--gray);
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: color 0.3s;
        }

        .see-all:hover {
            color: var(--light);
            text-decoration: underline;
        }

        /* 卡片网格布局 */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .card:hover {
            background: var(--gray-darker);
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .card-image {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 5px;
            margin-bottom: 15px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .card:hover .card-image img {
            transform: scale(1.05);
        }

        .card-play-btn {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: var(--primary);
            color: var(--dark);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }

        .card:hover .card-play-btn {
            opacity: 1;
            transform: translateY(0);
        }

        .card-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-description {
            color: var(--gray);
            font-size: 14px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 积分任务面板 */
        .points-panel {
            background: var(--dark-light);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .points-panel h2 {
            margin-bottom: 20px;
            font-size: 20px;
        }

        .tasks-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .task-item {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .task-info h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .task-info p {
            color: var(--gray);
            font-size: 14px;
        }

        .task-reward {
            color: var(--primary);
            font-weight: 700;
        }

        .task-btn {
            background: var(--primary);
            color: var(--dark);
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .task-btn:hover {
            background: var(--primary-light);
        }

        .task-btn.completed {
            background: var(--gray-dark);
            color: var(--gray);
            cursor: not-allowed;
        }

        /* VIP兑换面板 */
        .vip-panel {
            background: var(--dark-light);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .vip-panel h2 {
            margin-bottom: 20px;
            font-size: 20px;
        }

        .vip-options {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .vip-option {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
            position: relative;
        }

        .vip-option:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
        }

        .vip-option.featured {
            border-color: #ffd700;
            position: relative;
            overflow: hidden;
        }

        .vip-option.featured::before {
            content: '推荐';
            position: absolute;
            top: 10px;
            right: -25px;
            background: #ffd700;
            color: #000;
            padding: 3px 30px;
            font-size: 12px;
            font-weight: 700;
            transform: rotate(45deg);
        }

        .vip-icon {
            font-size: 36px;
            margin-bottom: 10px;
            color: #ffd700;
        }

        .vip-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .vip-duration {
            color: var(--gray);
            font-size: 14px;
            margin-bottom: 10px;
        }

        .vip-cost {
            color: var(--primary);
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .vip-bonus {
            color: #ffd700;
            font-size: 12px;
            font-weight: 600;
        }

        /* 播放列表 */
        .playlist-section {
            background: var(--dark-light);
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .playlist-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .playlist-title {
            font-size: 20px;
            font-weight: 700;
        }

        .source-selector {
            display: flex;
            gap: 10px;
            background: var(--dark-lighter);
            padding: 5px;
            border-radius: 8px;
            flex-wrap: wrap;
        }

        .source-btn {
            background: transparent;
            border: none;
            color: var(--gray);
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }

        .source-btn.active {
            background: var(--gray-darker);
            color: var(--light);
        }

        .song-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
            position: relative;
            overflow-y: auto;
            max-height: 500px;
        }

        .song-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            transition: background 0.3s;
            cursor: pointer;
            height: 60px;
        }

        .song-item:hover {
            background: var(--gray-darker);
        }

        .song-item.active {
            background: rgba(29, 185, 84, 0.2);
        }

        .song-number {
            width: 30px;
            text-align: center;
            color: var(--gray);
            font-size: 14px;
        }

        .song-info {
            flex: 1;
            margin-left: 15px;
            overflow: hidden;
        }

        .song-name {
            font-weight: 500;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .song-artist {
            font-size: 13px;
            color: var(--gray);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .song-duration {
            color: var(--gray);
            font-size: 14px;
            margin-right: 15px;
        }

        .song-actions {
            display: flex;
            gap: 10px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .song-item:hover .song-actions {
            opacity: 1;
        }

        .song-action-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            font-size: 16px;
            transition: color 0.3s;
        }

        .song-action-btn:hover {
            color: var(--light);
        }

        /* 播放器 */
        .player {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: var(--player-height);
            background: var(--dark-lighter);
            border-top: 1px solid var(--gray-darker);
            display: flex;
            align-items: center;
            padding: 0 20px;
            z-index: 100;
            transition: background 0.3s ease, border-color 0.3s ease;
        }

        .player-album-art {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            margin-right: 15px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            overflow: hidden;
            flex-shrink: 0;
        }

        .player-album-art img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .player-song-info {
            flex: 0 0 200px;
            margin-right: 20px;
            min-width: 0;
        }

        .player-song-title {
            font-weight: 600;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .player-song-artist {
            font-size: 12px;
            color: var(--gray);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .player-controls {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 600px;
        }

        .player-buttons {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 10px;
        }

        .control-btn {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .control-btn:hover {
            color: var(--light);
            background: rgba(255, 255, 255, 0.1);
        }

        [data-theme="light"] .control-btn:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .play-btn {
            background: var(--light);
            color: var(--dark);
            width: 36px;
            height: 36px;
            font-size: 14px;
        }

        .play-btn:hover {
            background: var(--gray);
            transform: scale(1.05);
        }

        .player-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }

        .player-time {
            font-size: 12px;
            color: var(--gray);
            min-width: 40px;
        }

        .progress-bar {
            flex: 1;
            height: 4px;
            background: var(--gray-dark);
            border-radius: 2px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: var(--gray);
            width: 0%;
            border-radius: 2px;
            transition: width 0.1s;
        }

        .progress-bar:hover .progress {
            background: var(--primary);
        }

        .player-extra {
            flex: 0 0 200px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 15px;
        }

        .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .volume-slider {
            width: 80px;
            -webkit-appearance: none;
            height: 4px;
            background: var(--gray-dark);
            border-radius: 2px;
            outline: none;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--gray);
            cursor: pointer;
        }

        .volume-slider:hover::-webkit-slider-thumb {
            background: var(--light);
        }

        /* 歌词面板 - 优化部分 */
        .lyrics-panel {
            position: fixed;
            right: -400px;
            top: 0;
            width: 400px;
            height: 100vh;
            background: var(--lyrics-bg);
            backdrop-filter: blur(10px);
            z-index: 20;
            padding: 30px;
            transition: right 0.4s ease;
            overflow-y: auto;
        }

        .lyrics-panel.open {
            right: 0;
        }

        .lyrics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .lyrics-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--lyrics-text);
        }

        .close-lyrics {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-lyrics:hover {
            color: var(--light);
        }

        .lyrics-container {
            text-align: center;
            line-height: 2.5;
            font-size: 18px;
            color: var(--lyrics-text);
            min-height: 200px;
        }

        .current-lyric {
            color: var(--lyrics-current);
            font-weight: 600;
            font-size: 22px;
            margin: 15px 0;
            transition: all 0.3s;
            padding: 10px;
            border-radius: 8px;
            background: var(--lyrics-highlight);
        }

        .no-lyrics {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 70%;
            gap: 20px;
            color: var(--gray);
        }

        .no-lyrics i {
            font-size: 48px;
        }

        .toggle-lyrics {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .toggle-lyrics:hover {
            color: var(--light);
        }

        /* 下载面板 */
        .download-panel {
            position: fixed;
            left: -400px;
            top: 0;
            width: 400px;
            height: 100vh;
            background: var(--lyrics-bg);
            backdrop-filter: blur(10px);
            z-index: 20;
            padding: 30px;
            transition: left 0.4s ease;
            overflow-y: auto;
        }

        .download-panel.open {
            left: 0;
        }

        .download-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .download-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--lyrics-text);
        }

        .close-download {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-download:hover {
            color: var(--light);
        }

        .download-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .download-option {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .download-info h3 {
            font-size: 16px;
            margin-bottom: 5px;
            color: var(--lyrics-text);
        }

        .download-info p {
            color: var(--gray);
            font-size: 14px;
        }

        .download-cost {
            color: var(--primary);
            font-weight: 700;
        }

        .download-btn {
            background: var(--primary);
            color: var(--dark);
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .download-btn:hover {
            background: var(--primary-light);
        }

        .download-btn.disabled {
            background: var(--gray-dark);
            color: var(--gray);
            cursor: not-allowed;
        }

        .download-btn.loading {
            background: var(--gray-dark);
            color: var(--gray);
            cursor: not-allowed;
            position: relative;
        }

        .download-btn.loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid transparent;
            border-top-color: var(--gray);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* 自定义VIP天数面板 */
        .custom-vip-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            background: var(--dark-lighter);
            border-radius: 10px;
            padding: 30px;
            z-index: 30;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            display: none;
        }

        .custom-vip-panel.open {
            display: block;
        }

        .custom-vip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .custom-vip-title {
            font-size: 20px;
            font-weight: 700;
        }

        .close-custom-vip {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-custom-vip:hover {
            color: var(--light);
        }

        .custom-vip-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .custom-vip-control {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
        }

        .custom-vip-control label {
            font-weight: 600;
        }

        .custom-vip-control input {
            background: var(--dark);
            border: 1px solid var(--gray-darker);
            color: var(--light);
            padding: 5px 10px;
            border-radius: 5px;
            width: 100px;
        }

        .custom-vip-info {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            margin: 15px 0;
        }

        .custom-vip-cost {
            color: var(--primary);
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 5px;
        }

        .custom-vip-bonus {
            color: #ffd700;
            font-size: 14px;
            font-weight: 600;
        }

        .custom-vip-confirm {
            background: var(--primary);
            color: var(--dark);
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            margin-top: 10px;
        }

        .custom-vip-confirm:hover {
            background: var(--primary-light);
        }

        /* 开发者模式面板 */
        .dev-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            max-height: 80vh;
            background: var(--dark-lighter);
            border-radius: 10px;
            padding: 30px;
            z-index: 30;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            display: none;
            overflow-y: auto;
        }

        .dev-panel.open {
            display: block;
        }

        .dev-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .dev-title {
            font-size: 20px;
            font-weight: 700;
        }

        .close-dev {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-dev:hover {
            color: var(--light);
        }

        .dev-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .dev-control {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--gray-darker);
        }

        .dev-control:last-child {
            border-bottom: none;
        }

        .dev-control label {
            font-weight: 600;
            flex: 1;
        }

        .dev-control input, .dev-control select {
            background: var(--dark);
            border: 1px solid var(--gray-darker);
            color: var(--light);
            padding: 5px 10px;
            border-radius: 5px;
            width: 120px;
            margin-right: 10px;
        }

        .dev-control button {
            background: var(--primary);
            color: var(--dark);
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .dev-control button:hover {
            background: var(--primary-light);
        }

        /* 设置面板 */
        .settings-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            max-height: 80vh;
            background: var(--dark-lighter);
            border-radius: 10px;
            padding: 30px;
            z-index: 30;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            display: none;
            overflow-y: auto;
        }

        .settings-panel.open {
            display: block;
        }

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .settings-title {
            font-size: 20px;
            font-weight: 700;
        }

        .close-settings {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-settings:hover {
            color: var(--light);
        }

        .settings-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .settings-control {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--gray-darker);
        }

        .settings-control:last-child {
            border-bottom: none;
        }

        .settings-control label {
            font-weight: 600;
            flex: 1;
        }

        .settings-control select {
            background: var(--dark);
            border: 1px solid var(--gray-darker);
            color: var(--light);
            padding: 5px 10px;
            border-radius: 5px;
            width: 150px;
        }

        .theme-preview {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .theme-option {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s;
        }

        .theme-option.active {
            border-color: var(--primary);
        }

        .theme-option.dark {
            background: linear-gradient(135deg, #121212 0%, #181818 50%, #282828 100%);
        }

        .theme-option.light {
            background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
        }

        /* 搜索类型指示器 */
        .search-type-indicator {
            display: inline-block;
            background: var(--primary);
            color: var(--dark);
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 10px;
            font-weight: 600;
        }
        
        /* 波浪进度条效果 */
        .wave-progress {
            position: relative;
            height: 100%;
            width: 100%;
            overflow: hidden;
            border-radius: 2px;
        }
        
        .wave-progress::before,
        .wave-progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 200%;
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--primary) 25%, 
                var(--primary-light) 50%, 
                var(--primary) 75%, 
                transparent 100%);
            animation: waveMove 3s linear infinite;
            opacity: 0.7;
        }
        
        .wave-progress::after {
            animation-delay: -1.5s;
            opacity: 0.4;
        }
        
        @keyframes waveMove {
            0% {
                transform: translateX(-50%);
            }
            100% {
                transform: translateX(0%);
            }
        }
        
        .progress-bar:hover .wave-progress::before,
        .progress-bar:hover .wave-progress::after {
            opacity: 1;
        }

        /* 错误消息样式 */
        .error-message {
            background: rgba(244, 67, 54, 0.1);
            border-left: 4px solid var(--error);
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            display: none;
            align-items: center;
            gap: 10px;
        }

        .error-message.show {
            display: flex;
        }

        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            flex-direction: column;
            gap: 15px;
            color: var(--gray);
        }

        .loading i {
            font-size: 32px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 下载进度提示 */
        .download-progress {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--dark-lighter);
            border-radius: 10px;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 1000;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            max-width: 300px;
            display: none;
        }

        .download-progress.show {
            display: flex;
        }

        .download-progress i {
            color: var(--primary);
            font-size: 18px;
        }

        .download-progress-text {
            flex: 1;
        }

        .download-progress-title {
            font-weight: 600;
            margin-bottom: 3px;
        }

        .download-progress-desc {
            font-size: 12px;
            color: var(--gray);
        }

        .download-progress-close {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            font-size: 14px;
        }

        .download-progress-close:hover {
            color: var(--light);
        }

        /* 全屏模式样式 - 优化部分 */
        .fullscreen-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--lyrics-bg);
            z-index: 2000;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--lyrics-text);
            padding: 20px;
            box-sizing: border-box;
        }

        .fullscreen-overlay.active {
            display: flex;
        }

        .fullscreen-info {
            text-align: center;
            margin-bottom: 30px;
        }

        .fullscreen-title {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .fullscreen-artist {
            font-size: 24px;
            color: var(--gray);
        }

        .fullscreen-lyrics {
            font-size: 24px;
            text-align: center;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
            overflow-y: auto;
            max-height: 60vh;
            width: 100%;
            color: var(--lyrics-text);
        }

        .fullscreen-controls {
            position: fixed;
            bottom: 30px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .fullscreen-control-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: var(--lyrics-text);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .fullscreen-control-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }

        /* 快捷键提示 */
        .shortcut-hint {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 1001;
            display: none;
        }

        .shortcut-hint.show {
            display: block;
        }

        .keyboard-shortcuts {
            margin-top: 10px;
            padding: 10px;
            background: var(--dark-lighter);
            border-radius: 8px;
            font-size: 14px;
        }

        .keyboard-shortcuts h3 {
            margin-bottom: 10px;
            font-size: 16px;
        }

        .shortcut-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .shortcut-key {
            background: var(--gray-darker);
            padding: 2px 8px;
            border-radius: 4px;
            font-family: monospace;
        }

        /* 歌词格式选择 */
        .lyrics-format-selector {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .format-btn {
            background: var(--gray-darker);
            border: none;
            color: var(--gray);
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 12px;
        }

        .format-btn.active {
            background: var(--primary);
            color: var(--dark);
        }

        /* 移动端优化 */
        .mobile-controls {
            display: none;
            position: fixed;
            bottom: 90px;
            left: 0;
            width: 100%;
            justify-content: center;
            gap: 20px;
            padding: 15px;
            z-index: 99;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

        .mobile-control-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .mobile-control-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .cards-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            
            .vip-options {
                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            }
        }

        @media (max-width: 992px) {
            .sidebar {
                transform: translateX(-100%);
                width: 280px;
            }

            .sidebar.active {
                transform: translateX(0);
            }

            .mobile-menu-toggle {
                display: flex;
            }

            .content {
                margin-left: 0;
                padding: 20px;
            }

            .player-song-info {
                flex: 0 0 150px;
            }

            .player-extra {
                flex: 0 0 150px;
            }

            .lyrics-panel {
                width: 100%;
                right: -100%;
            }

            .download-panel {
                width: 100%;
                left: -100%;
            }

            .custom-vip-panel {
                width: 90%;
            }

            .dev-panel {
                width: 90%;
            }

            .settings-panel {
                width: 90%;
            }

            .search-container {
                width: 300px;
            }

            .welcome-banner {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            /* 手机端歌词样式优化 */
            .lyrics-panel {
                padding: 20px;
            }

            .lyrics-container {
                font-size: 16px;
                line-height: 2;
            }

            .current-lyric {
                font-size: 18px;
            }

            /* 全屏模式手机端优化 */
            .fullscreen-overlay {
                padding: 10px;
            }

            .fullscreen-title {
                font-size: 24px;
            }

            .fullscreen-artist {
                font-size: 18px;
            }

            .fullscreen-lyrics {
                font-size: 18px;
                line-height: 1.6;
            }

            .fullscreen-controls {
                bottom: 20px;
            }

            .fullscreen-control-btn {
                width: 44px;
                height: 44px;
                font-size: 18px;
            }

            /* 显示移动端控制按钮 */
            .mobile-controls {
                display: flex;
            }
        }

        @media (max-width: 768px) {
            .cards-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }

            .search-container {
                width: 250px;
            }

            .user-name {
                display: none;
            }

            .player {
                padding: 0 10px;
            }

            .player-song-info {
                flex: 0 0 120px;
            }

            .player-extra {
                flex: 0 0 80px;
            }

            .volume-slider {
                width: 60px;
            }

            .tasks-container {
                grid-template-columns: 1fr;
            }
            
            .vip-options {
                grid-template-columns: 1fr;
            }

            /* 手机端歌词样式进一步优化 */
            .lyrics-container {
                font-size: 16px;
                line-height: 1.8;
            }

            .current-lyric {
                font-size: 18px;
                margin: 10px 0;
            }
        }

        @media (max-width: 576px) {
            .cards-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }

            .search-container {
                width: 200px;
            }

            .player-album-art {
                width: 50px;
                height: 50px;
            }

            .player-song-info {
                flex: 0 0 100px;
            }

            .player-extra {
                flex: 0 0 60px;
            }

            .volume-container {
                display: none;
            }

            .toggle-lyrics {
                display: none;
            }

            /* 手机端歌词样式进一步优化 */
            .lyrics-container {
                font-size: 14px;
                line-height: 1.6;
            }

            .current-lyric {
                font-size: 16px;
                margin: 8px 0;
            }

            /* 全屏模式手机端进一步优化 */
            .fullscreen-title {
                font-size: 20px;
            }

            .fullscreen-artist {
                font-size: 16px;
            }

            .fullscreen-lyrics {
                font-size: 16px;
                line-height: 1.5;
            }

            .fullscreen-controls {
                bottom: 15px;
            }

            .fullscreen-control-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
        }

        /* 移动端歌词面板底部控制按钮 */
        .lyrics-controls-mobile {
            display: none;
            position: fixed;
            bottom: 20px;
            left: 0;
            width: 100%;
            justify-content: center;
            gap: 15px;
            z-index: 25;
        }

        @media (max-width: 992px) {
            .lyrics-controls-mobile {
                display: flex;
            }
        }

        .lyrics-control-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
            backdrop-filter: blur(10px);
        }

        .lyrics-control-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <!-- 移动端菜单切换按钮 -->
    <button class="mobile-menu-toggle" id="mobileMenuToggle">
        <i class="fas fa-bars"></i>
    </button>

    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="logo">
            <i class="fas fa-music"></i>
            <span>悦音阁</span>
        </div>

        <!-- 积分指示器 -->
        <div class="points-indicator">
            <span>积分</span>
            <span class="points-value" id="pointsValue">0</span>
        </div>

        <!-- VIP指示器 -->
        <div class="vip-indicator" id="vipIndicator" style="display: none;">
            <i class="fas fa-crown"></i>
            <span>VIP会员</span>
            <span class="vip-time" id="vipTime"></span>
        </div>

        <div class="nav-section">
            <div class="nav-title">导航</div>
            <ul class="nav-links">
                <li><a href="#" class="active"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#"><i class="fas fa-search"></i> 搜索</a></li>
                <li><a href="#"><i class="fas fa-layer-group"></i> 我的音乐库</a></li>
                <li><a href="#"><i class="fas fa-heart"></i> 我喜欢的音乐</a></li>
                <li><a href="#" id="historyLink"><i class="fas fa-clock"></i> 播放历史</a></li>
                <li><a href="#" id="downloadsLink"><i class="fas fa-download"></i> 下载管理</a></li>
                <li><a href="#" id="settingsLink"><i class="fas fa-cog"></i> 设置</a></li>
            </ul>
        </div>

        <div class="nav-section">
            <div class="nav-title">你的音乐库</div>
            <ul class="nav-links">
                <li><a href="#"><i class="fas fa-compact-disc"></i> 本地音乐</a></li>
                <li><a href="#"><i class="fas fa-download"></i> 下载管理</a></li>
                <li><a href="#"><i class="fas fa-history"></i> 播放历史</a></li>
            </ul>
        </div>
    </div>

    <!-- 移动端控制按钮 -->
    <div class="mobile-controls" id="mobileControls">
        <button class="mobile-control-btn" id="mobilePrevBtn">
            <i class="fas fa-step-backward"></i>
        </button>
        <button class="mobile-control-btn" id="mobilePlayBtn">
            <i class="fas fa-play"></i>
        </button>
        <button class="mobile-control-btn" id="mobileNextBtn">
            <i class="fas fa-step-forward"></i>
        </button>
        <button class="mobile-control-btn" id="mobileLyricsBtn">
            <i class="fas fa-microphone"></i>
        </button>
    </div>

    <!-- 主内容区 -->
    <div class="content">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="search-container">
                <i class="fas fa-search"></i>
                <input type="text" id="searchInput" placeholder="搜索音乐、歌手、歌词..." autocomplete="off">
                <div class="search-suggestions" id="searchSuggestions">
                    <!-- 搜索建议将在这里动态生成 -->
                </div>
            </div>

            <div class="user-actions">
                <button class="upgrade-btn" id="upgradeBtn">升级VIP</button>
                <div class="user-profile">
                    <div class="user-avatar">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=musiclover" alt="用户头像" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div class="avatar-fallback" style="display: none;">音</div>
                    </div>
                    <div class="user-name">音乐爱好者</div>
                </div>
            </div>
        </div>

        <!-- 欢迎横幅 -->
        <div class="welcome-banner">
            <div class="welcome-text">
                <h1 id="welcomeTitle">晚上好，音乐爱好者</h1>
                <p id="welcomeSubtitle">让音乐点亮你的生活，发现更多精彩内容</p>
            </div>
            <button class="play-shuffle-btn">
                <i class="fas fa-random"></i> 随机播放
            </button>
        </div>

        <!-- 快捷键提示 -->
        <div class="shortcut-hint" id="shortcutHint">
            <div>键盘快捷键</div>
            <div class="keyboard-shortcuts">
                <h3>播放控制</h3>
                <div class="shortcut-item">
                    <span>空格键</span>
                    <span class="shortcut-key">播放/暂停</span>
                </div>
                <div class="shortcut-item">
                    <span>← → 方向键</span>
                    <span class="shortcut-key">上一首/下一首</span>
                </div>
                <div class="shortcut-item">
                    <span>数字键 1-20</span>
                    <span class="shortcut-key">播放对应歌曲</span>
                </div>
                <h3>界面控制</h3>
                <div class="shortcut-item">
                    <span>Q 键</span>
                    <span class="shortcut-key">进入全屏模式</span>
                </div>
                <div class="shortcut-item">
                    <span>F 键 / ESC</span>
                    <span class="shortcut-key">退出全屏模式</span>
                </div>
                <div class="shortcut-item">
                    <span>L 键</span>
                    <span class="shortcut-key">显示/隐藏歌词</span>
                </div>
                <div class="shortcut-item">
                    <span>T 键</span>
                    <span class="shortcut-key">切换主题</span>
                </div>
            </div>
        </div>

        <!-- 积分任务面板 -->
        <div class="points-panel">
            <h2>积分任务</h2>
            <div class="tasks-container">
                <div class="task-item">
                    <div class="task-info">
                        <h3>每日签到</h3>
                        <p>每日首次登录可获得积分</p>
                        <div class="task-reward">奖励: 10-20积分</div>
                    </div>
                    <button class="task-btn" id="dailyCheckinBtn">签到</button>
                </div>
                <div class="task-item">
                    <div class="task-info">
                        <h3>听歌奖励</h3>
                        <p>每听30分钟歌曲可获得积分</p>
                        <div class="task-reward">奖励: 5积分/30分钟 (日上限50积分)</div>
                    </div>
                    <div class="task-progress" id="listenProgress">0/30分钟</div>
                </div>
                <div class="task-item">
                    <div class="task-info">
                        <h3>分享歌曲</h3>
                        <p>每日首次分享歌曲到社交媒体</p>
                        <div class="task-reward">奖励: 15积分</div>
                    </div>
                    <button class="task-btn" id="shareTaskBtn">分享</button>
                </div>
                <div class="task-item">
                    <div class="task-info">
                        <h3>收藏歌单</h3>
                        <p>每日首次收藏歌单</p>
                        <div class="task-reward">奖励: 20积分</div>
                    </div>
                    <button class="task-btn" id="favoriteTaskBtn">收藏</button>
                </div>
            </div>
        </div>

        <!-- VIP兑换面板 -->
        <div class="vip-panel">
            <h2>VIP会员兑换</h2>
            <div class="vip-options">
                <div class="vip-option" data-days="1" data-cost="50" data-bonus="0">
                    <div class="vip-icon"><i class="fas fa-crown"></i></div>
                    <div class="vip-title">1日VIP</div>
                    <div class="vip-duration">24小时特权</div>
                    <div class="vip-cost">50积分</div>
                    <div class="vip-bonus">返0积分</div>
                </div>
                <div class="vip-option" data-days="7" data-cost="600" data-bonus="100">
                    <div class="vip-icon"><i class="fas fa-crown"></i></div>
                    <div class="vip-title">7日VIP</div>
                    <div class="vip-duration">7天特权</div>
                    <div class="vip-cost">600积分</div>
                    <div class="vip-bonus">返100积分</div>
                </div>
                <div class="vip-option featured" data-days="30" data-cost="850" data-bonus="450">
                    <div class="vip-icon"><i class="fas fa-crown"></i></div>
                    <div class="vip-title">月度VIP</div>
                    <div class="vip-duration">30天特权</div>
                    <div class="vip-cost">850积分</div>
                    <div class="vip-bonus">返450积分</div>
                </div>
                <div class="vip-option" data-days="90" data-cost="1000" data-bonus="700">
                    <div class="vip-icon"><i class="fas fa-crown"></i></div>
                    <div class="vip-title">季度VIP</div>
                    <div class="vip-duration">90天特权</div>
                    <div class="vip-cost">1000积分</div>
                    <div class="vip-bonus">返700积分</div>
                </div>
                <div class="vip-option" data-days="365" data-cost="1200" data-bonus="1000">
                    <div class="vip-icon"><i class="fas fa-crown"></i></div>
                    <div class="vip-title">年度VIP</div>
                    <div class="vip-duration">365天特权</div>
                    <div class="vip-cost">1200积分</div>
                    <div class="vip-bonus">返1000积分</div>
                </div>
                <div class="vip-option" data-days="0" data-cost="1500" data-bonus="1500">
                    <div class="vip-icon"><i class="fas fa-infinity"></i></div>
                    <div class="vip-title">永久VIP</div>
                    <div class="vip-duration">永久特权</div>
                    <div class="vip-cost">1500积分</div>
                    <div class="vip-bonus">返1500积分</div>
                </div>
                <div class="vip-option" id="customVipOption">
                    <div class="vip-icon"><i class="fas fa-cog"></i></div>
                    <div class="vip-title">自定义VIP</div>
                    <div class="vip-duration">自定义天数</div>
                    <div class="vip-cost">50积分起</div>
                    <div class="vip-bonus">返对应积分</div>
                </div>
            </div>
        </div>

        <!-- 快速访问 -->
        <div class="section-title">
            <h2>快速访问</h2>
            <a href="#" class="see-all">显示全部</a>
        </div>

        <div class="cards-grid">
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-fire" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">热门推荐</div>
                <div class="card-description">发现当前最热门的音乐</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-music" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">新歌首发</div>
                <div class="card-description">抢先收听最新发布的歌曲</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-headphones" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">私人FM</div>
                <div class="card-description">根据你的口味推荐音乐</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-chart-line" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">排行榜</div>
                <div class="card-description">查看各类音乐排行榜</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
        </div>

        <!-- 为你推荐 -->
        <div class="section-title">
            <h2>为你推荐</h2>
            <a href="#" class="see-all">显示全部</a>
        </div>

        <div class="cards-grid">
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-cloud" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">每日推荐</div>
                <div class="card-description">根据你的听歌习惯生成</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-calendar" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">每周新发现</div>
                <div class="card-description">每周为你推荐新音乐</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-heart" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">心动模式</div>
                <div class="card-description">混合你喜欢的歌曲</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
            <div class="card">
                <div class="card-image">
                    <i class="fas fa-compact-disc" style="font-size: 48px;"></i>
                </div>
                <div class="card-title">专属歌单</div>
                <div class="card-description">为你量身定制的歌单</div>
                <div class="card-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
        </div>

        <!-- 播放列表 -->
        <div class="playlist-section">
            <div class="playlist-header">
                <div class="playlist-title" id="playlistTitle">推荐歌单</div>
                <div class="source-selector">
                    <button class="source-btn active" data-source="netease">网易云</button>
                    <button class="source-btn" data-source="tencent">QQ音乐</button>
                    <button class="source-btn" data-source="kuwo">酷我</button>
                    <button class="source-btn" data-source="joox">Joox</button>
                </div>
            </div>

            <div class="error-message" id="errorMessage">
                <i class="fas fa-exclamation-circle"></i>
                <span id="errorText">发生错误，请稍后重试</span>
            </div>

            <div class="song-list" id="songList">
                <div class="loading" id="loadingIndicator">
                    <i class="fas fa-spinner"></i>
                    <span>加载中...</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 播放器 -->
    <div class="player">
        <div class="player-album-art">
            <i class="fas fa-music"></i>
        </div>
        <div class="player-song-info">
            <div class="player-song-title">选择一首歌曲开始播放</div>
            <div class="player-song-artist">-</div>
        </div>
        <div class="player-controls">
            <div class="player-buttons">
                <button class="control-btn" id="shuffleBtn">
                    <i class="fas fa-random"></i>
                </button>
                <button class="control-btn" id="prevBtn">
                    <i class="fas fa-step-backward"></i>
                </button>
                <button class="control-btn play-btn" id="playBtn">
                    <i class="fas fa-play"></i>
                </button>
                <button class="control-btn" id="nextBtn">
                    <i class="fas fa-step-forward"></i>
                </button>
                <button class="control-btn" id="repeatBtn">
                    <i class="fas fa-redo"></i>
                </button>
            </div>
            <div class="player-progress">
                <div class="player-time" id="currentTime">0:00</div>
                <div class="progress-bar" id="progressBar">
                    <div class="progress" id="progress"></div>
                </div>
                <div class="player-time" id="duration">0:00</div>
            </div>
        </div>
        <div class="player-extra">
            <button class="control-btn toggle-lyrics" id="toggleLyricsBtn">
                <i class="fas fa-microphone"></i>
            </button>
            <button class="control-btn toggle-download" id="toggleDownloadBtn">
                <i class="fas fa-download"></i>
            </button>
            <div class="volume-container">
                <button class="control-btn" id="volumeBtn">
                    <i class="fas fa-volume-up"></i>
                </button>
                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80">
            </div>
            <button class="control-btn" id="fullscreenToggleBtn">
                <i class="fas fa-expand"></i>
            </button>
            <button class="control-btn" id="themeToggleBtn">
                <i class="fas fa-moon"></i>
            </button>
        </div>
    </div>

    <!-- 歌词面板 - 优化部分 -->
    <div class="lyrics-panel" id="lyricsPanel">
        <div class="lyrics-header">
            <div class="lyrics-title">歌词</div>
            <button class="close-lyrics" id="closeLyricsBtn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="lyrics-container" id="lyricsContainer">
            <div class="no-lyrics">
                <i class="fas fa-music"></i>
                <div>暂无歌词</div>
            </div>
        </div>
    </div>

    <!-- 移动端歌词控制按钮 -->
    <div class="lyrics-controls-mobile" id="lyricsControlsMobile">
        <button class="lyrics-control-btn" id="mobileLyricsPrevBtn">
            <i class="fas fa-step-backward"></i>
        </button>
        <button class="lyrics-control-btn" id="mobileLyricsPlayBtn">
            <i class="fas fa-play"></i>
        </button>
        <button class="lyrics-control-btn" id="mobileLyricsNextBtn">
            <i class="fas fa-step-forward"></i>
        </button>
        <button class="lyrics-control-btn" id="mobileLyricsCloseBtn">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <!-- 下载面板 -->
    <div class="download-panel" id="downloadPanel">
        <div class="download-header">
            <div class="download-title">下载选项</div>
            <button class="close-download" id="closeDownloadBtn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="download-options">
            <div class="download-option">
                <div class="download-info">
                    <h3>下载歌词</h3>
                    <p>下载当前歌曲的歌词文件</p>
                    <div class="lyrics-format-selector">
                        <button class="format-btn active" data-format="lrc">LRC格式</button>
                        <button class="format-btn" data-format="txt">TXT格式</button>
                        <button class="format-btn" data-format="doc">Word格式</button>
                    </div>
                    <div class="download-cost">花费: 10积分</div>
                </div>
                <button class="download-btn" id="downloadLyricsBtn">下载</button>
            </div>
            <div class="download-option">
                <div class="download-info">
                    <h3>下载歌曲</h3>
                    <p>下载当前歌曲的音频文件</p>
                    <div class="download-cost">花费: 50积分</div>
                </div>
                <button class="download-btn" id="downloadSongBtn">下载</button>
            </div>
            <div class="download-option">
                <div class="download-info">
                    <h3>下载高清专辑图</h3>
                    <p>下载当前歌曲的高清专辑封面</p>
                    <div class="download-cost">花费: 20积分</div>
                </div>
                <button class="download-btn" id="downloadAlbumBtn">下载</button>
            </div>
            <div class="download-option">
                <div class="download-info">
                    <h3>下载歌曲封面</h3>
                    <p>下载当前歌曲的封面图片</p>
                    <div class="download-cost">花费: 15积分</div>
                </div>
                <button class="download-btn" id="downloadCoverBtn">下载</button>
            </div>
        </div>
    </div>

    <!-- 自定义VIP天数面板 -->
    <div class="custom-vip-panel" id="customVipPanel">
        <div class="custom-vip-header">
            <div class="custom-vip-title">自定义VIP天数</div>
            <button class="close-custom-vip" id="closeCustomVipBtn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="custom-vip-controls">
            <div class="custom-vip-control">
                <label for="customVipDays">VIP天数:</label>
                <input type="number" id="customVipDays" min="1" max="3650" value="1">
            </div>
            <div class="custom-vip-info">
                <div class="custom-vip-cost" id="customVipCost">花费: 50积分</div>
                <div class="custom-vip-bonus" id="customVipBonus">返0积分</div>
            </div>
            <button class="custom-vip-confirm" id="customVipConfirm">确认兑换</button>
        </div>
    </div>

    <!-- 开发者模式面板 -->
    <div class="dev-panel" id="devPanel">
        <div class="dev-header">
            <div class="dev-title">开发者模式</div>
            <button class="close-dev" id="closeDevBtn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="dev-controls">
            <div class="dev-control">
                <label for="devPoints">积分数量:</label>
                <input type="number" id="devPoints" min="0" value="0">
                <button id="setPointsBtn">设置积分</button>
            </div>
            <!-- 新增：增加积分功能 -->
            <div class="dev-control">
                <label for="devAddPoints">增加积分:</label>
                <input type="number" id="devAddPoints" min="0" value="100">
                <button id="addPointsBtn">增加积分</button>
            </div>
            <div class="dev-control">
                <label for="devVip">VIP状态:</label>
                <select id="devVip">
                    <option value="false">非VIP</option>
                    <option value="true">VIP</option>
                </select>
                <button id="setVipBtn">设置VIP</button>
            </div>
            <div class="dev-control">
                <label for="devVipDays">VIP天数:</label>
                <input type="number" id="devVipDays" min="0" value="0">
                <button id="setVipDaysBtn">设置VIP天数</button>
            </div>
            <div class="dev-control">
                <label for="devVipType">VIP类型:</label>
                <select id="devVipType">
                    <option value="7">7天VIP</option>
                    <option value="30">月度VIP</option>
                    <option value="90">季度VIP</option>
                    <option value="365">年度VIP</option>
                    <option value="0">永久VIP</option>
                    <option value="custom">自定义天数</option>
                </select>
                <button id="setVipTypeBtn">设置VIP类型</button>
            </div>
            <div class="dev-control">
                <label>免费下载:</label>
                <button id="toggleFreeDownloadsBtn">免费下载已关闭</button>
            </div>
            <div class="dev-control">
                <label>重置任务:</label>
                <button id="resetTasksBtn">重置所有任务</button>
            </div>
        </div>
    </div>

    <!-- 设置面板 -->
    <div class="settings-panel" id="settingsPanel">
        <div class="settings-header">
            <div class="settings-title">设置</div>
            <button class="close-settings" id="closeSettingsBtn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="settings-controls">
            <div class="settings-control">
                <label for="themeSelect">主题设置:</label>
                <select id="themeSelect">
                    <option value="auto">跟随系统</option>
                    <option value="dark">深色模式</option>
                    <option value="light">浅色模式</option>
                </select>
            </div>
            <div class="settings-control">
                <label>主题预览:</label>
                <div class="theme-preview">
                    <div class="theme-option dark active" data-theme="dark"></div>
                    <div class="theme-option light" data-theme="light"></div>
                </div>
            </div>
            <div class="settings-control">
                <label for="languageSelect">语言:</label>
                <select id="languageSelect">
                    <option value="zh-CN">简体中文</option>
                    <option value="en-US">English</option>
                </select>
            </div>
            <div class="settings-control">
                <label for="audioQuality">音频质量:</label>
                <select id="audioQuality">
                    <option value="standard">标准质量</option>
                    <option value="high">高质量</option>
                    <option value="lossless">无损音质</option>
                </select>
            </div>
            <div class="settings-control">
                <label for="autoPlay">自动播放:</label>
                <select id="autoPlay">
                    <option value="enabled">启用</option>
                    <option value="disabled">禁用</option>
                </select>
            </div>
            <div class="settings-control">
                <label for="cacheSize">缓存大小:</label>
                <select id="cacheSize">
                    <option value="small">小 (100MB)</option>
                    <option value="medium">中 (500MB)</option>
                    <option value="large">大 (1GB)</option>
                </select>
            </div>
        </div>
    </div>

    <!-- 下载进度提示 -->
    <div class="download-progress" id="downloadProgress">
        <i class="fas fa-download"></i>
        <div class="download-progress-text">
            <div class="download-progress-title" id="downloadProgressTitle">正在下载</div>
            <div class="download-progress-desc" id="downloadProgressDesc">请稍候...</div>
        </div>
        <button class="download-progress-close" id="downloadProgressClose">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <!-- 全屏模式 - 优化部分 -->
    <div class="fullscreen-overlay" id="fullscreenOverlay">
        <div class="fullscreen-info">
            <div class="fullscreen-title" id="fullscreenTitle">选择一首歌曲开始播放</div>
            <div class="fullscreen-artist" id="fullscreenArtist">-</div>
        </div>
        <div class="fullscreen-lyrics" id="fullscreenLyrics">
            <div class="no-lyrics">
                <i class="fas fa-music"></i>
                <div>暂无歌词</div>
            </div>
        </div>
        <div class="fullscreen-controls">
            <button class="fullscreen-control-btn" id="fullscreenPrevBtn">
                <i class="fas fa-step-backward"></i>
            </button>
            <button class="fullscreen-control-btn" id="fullscreenPlayBtn">
                <i class="fas fa-play"></i>
            </button>
            <button class="fullscreen-control-btn" id="fullscreenNextBtn">
                <i class="fas fa-step-forward"></i>
            </button>
            <button class="fullscreen-control-btn" id="fullscreenExitBtn">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM元素
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const sidebar = document.getElementById('sidebar');
            const searchInput = document.getElementById('searchInput');
            const searchSuggestions = document.getElementById('searchSuggestions');
            const songList = document.getElementById('songList');
            const playBtn = document.getElementById('playBtn');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const shuffleBtn = document.getElementById('shuffleBtn');
            const repeatBtn = document.getElementById('repeatBtn');
            const progressBar = document.getElementById('progressBar');
            const progress = document.getElementById('progress');
            const currentTime = document.getElementById('currentTime');
            const duration = document.getElementById('duration');
            const volumeBtn = document.getElementById('volumeBtn');
            const volumeSlider = document.getElementById('volumeSlider');
            const toggleLyricsBtn = document.getElementById('toggleLyricsBtn');
            const closeLyricsBtn = document.getElementById('closeLyricsBtn');
            const lyricsPanel = document.getElementById('lyricsPanel');
            const lyricsContainer = document.getElementById('lyricsContainer');
            const errorMessage = document.getElementById('errorMessage');
            const errorText = document.getElementById('errorText');
            const loadingIndicator = document.getElementById('loadingIndicator');
            const sourceBtns = document.querySelectorAll('.source-btn');
            const pointsValue = document.getElementById('pointsValue');
            const vipIndicator = document.getElementById('vipIndicator');
            const vipTime = document.getElementById('vipTime');
            const upgradeBtn = document.getElementById('upgradeBtn');
            const dailyCheckinBtn = document.getElementById('dailyCheckinBtn');
            const listenProgress = document.getElementById('listenProgress');
            const shareTaskBtn = document.getElementById('shareTaskBtn');
            const favoriteTaskBtn = document.getElementById('favoriteTaskBtn');
            const vipOptions = document.querySelectorAll('.vip-option');
            const customVipOption = document.getElementById('customVipOption');
            const toggleDownloadBtn = document.getElementById('toggleDownloadBtn');
            const closeDownloadBtn = document.getElementById('closeDownloadBtn');
            const downloadPanel = document.getElementById('downloadPanel');
            const downloadLyricsBtn = document.getElementById('downloadLyricsBtn');
            const downloadSongBtn = document.getElementById('downloadSongBtn');
            const downloadAlbumBtn = document.getElementById('downloadAlbumBtn');
            const downloadCoverBtn = document.getElementById('downloadCoverBtn');
            const customVipPanel = document.getElementById('customVipPanel');
            const closeCustomVipBtn = document.getElementById('closeCustomVipBtn');
            const customVipDays = document.getElementById('customVipDays');
            const customVipCost = document.getElementById('customVipCost');
            const customVipBonus = document.getElementById('customVipBonus');
            const customVipConfirm = document.getElementById('customVipConfirm');
            const devPanel = document.getElementById('devPanel');
            const closeDevBtn = document.getElementById('closeDevBtn');
            const devPoints = document.getElementById('devPoints');
            const setPointsBtn = document.getElementById('setPointsBtn');
            // 新增：增加积分功能相关元素
            const devAddPoints = document.getElementById('devAddPoints');
            const addPointsBtn = document.getElementById('addPointsBtn');
            const devVip = document.getElementById('devVip');
            const setVipBtn = document.getElementById('setVipBtn');
            const devVipDays = document.getElementById('devVipDays');
            const setVipDaysBtn = document.getElementById('setVipDaysBtn');
            const devVipType = document.getElementById('devVipType');
            const setVipTypeBtn = document.getElementById('setVipTypeBtn');
            const toggleFreeDownloadsBtn = document.getElementById('toggleFreeDownloadsBtn');
            const resetTasksBtn = document.getElementById('resetTasksBtn');
            const downloadsLink = document.getElementById('downloadsLink');
            const historyLink = document.getElementById('historyLink');
            const settingsLink = document.getElementById('settingsLink');
            const welcomeTitle = document.getElementById('welcomeTitle');
            const welcomeSubtitle = document.getElementById('welcomeSubtitle');
            const playlistTitle = document.getElementById('playlistTitle');
            const downloadProgress = document.getElementById('downloadProgress');
            const downloadProgressTitle = document.getElementById('downloadProgressTitle');
            const downloadProgressDesc = document.getElementById('downloadProgressDesc');
            const downloadProgressClose = document.getElementById('downloadProgressClose');
            const fullscreenToggleBtn = document.getElementById('fullscreenToggleBtn');
            const fullscreenOverlay = document.getElementById('fullscreenOverlay');
            const fullscreenTitle = document.getElementById('fullscreenTitle');
            const fullscreenArtist = document.getElementById('fullscreenArtist');
            const fullscreenLyrics = document.getElementById('fullscreenLyrics');
            const fullscreenPrevBtn = document.getElementById('fullscreenPrevBtn');
            const fullscreenPlayBtn = document.getElementById('fullscreenPlayBtn');
            const fullscreenNextBtn = document.getElementById('fullscreenNextBtn');
            const fullscreenExitBtn = document.getElementById('fullscreenExitBtn');
            const shortcutHint = document.getElementById('shortcutHint');
            const formatBtns = document.querySelectorAll('.format-btn');
            const lyricsControlsMobile = document.getElementById('lyricsControlsMobile');
            const mobileLyricsPrevBtn = document.getElementById('mobileLyricsPrevBtn');
            const mobileLyricsPlayBtn = document.getElementById('mobileLyricsPlayBtn');
            const mobileLyricsNextBtn = document.getElementById('mobileLyricsNextBtn');
            const mobileLyricsCloseBtn = document.getElementById('mobileLyricsCloseBtn');
            const mobileControls = document.getElementById('mobileControls');
            const mobilePrevBtn = document.getElementById('mobilePrevBtn');
            const mobilePlayBtn = document.getElementById('mobilePlayBtn');
            const mobileNextBtn = document.getElementById('mobileNextBtn');
            const mobileLyricsBtn = document.getElementById('mobileLyricsBtn');
            // 新增：主题相关元素
            const themeToggleBtn = document.getElementById('themeToggleBtn');
            const settingsPanel = document.getElementById('settingsPanel');
            const closeSettingsBtn = document.getElementById('closeSettingsBtn');
            const themeSelect = document.getElementById('themeSelect');
            const themeOptions = document.querySelectorAll('.theme-option');
            const languageSelect = document.getElementById('languageSelect');
            const audioQuality = document.getElementById('audioQuality');
            const autoPlay = document.getElementById('autoPlay');
            const cacheSize = document.getElementById('cacheSize');

            // 应用状态
            const state = {
                isPlaying: false,
                currentSongIndex: -1,
                songs: [],
                currentTime: 0,
                duration: 0,
                volume: 80,
                isMuted: false,
                isShuffled: false,
                repeatMode: 'off', // off, one, all
                isLyricsVisible: false,
                currentSource: 'netease',
                searchHistory: [],
                audioPlayer: new Audio(),
                // 积分系统状态
                points: 0,
                isVip: false,
                vipExpiry: null, // VIP到期时间
                dailyCheckinDone: false,
                listenTimeToday: 0, // 分钟
                shareTaskDone: false,
                favoriteTaskDone: false,
                // 播放历史
                playHistory: [],
                // 当前视图
                currentView: 'default', // default, search, history
                // 下载状态
                isDownloadPanelOpen: false,
                // 开发者模式
                isDevMode: false,
                freeDownloads: false,
                // 全屏模式
                isFullscreen: false,
                // 歌词下载格式
                lyricsDownloadFormat: 'lrc',
                // 歌词数据
                lyrics: [],
                currentLyricIndex: -1,
                // 新增：听歌积分相关
                listenTimeTaskActive: false,
                listenPointsEarnedToday: 0,
                // 新增：主题设置
                theme: 'auto', // auto, dark, light
                language: 'zh-CN',
                audioQuality: 'standard',
                autoPlay: 'enabled',
                cacheSize: 'medium'
            };

            // API基础URL
            const API_BASE_URL = 'https://music-api.gdstudio.xyz/api.php';

            // VIP返积分配置
            const vipBonusConfig = {
                1: 0,      // 1天VIP返0积分
                7: 100,    // 7天VIP返100积分
                30: 450,   // 月度VIP返450积分
                90: 700,   // 季度VIP返700积分
                365: 1000, // 年度VIP返1000积分
                0: 1500    // 永久VIP返1500积分
            };

            // 初始化应用
            function initApp() {
                try {
                    loadUserData();
                    loadUserAvatar();
                    setupEventListeners();
                    loadDefaultSongs();
                    updatePointsUI();
                    updateVipUI();
                    updateTasksUI();
                    updateWelcomeBanner();
                    checkVipExpiry();
                    setupKeyboardShortcuts();
                    setupThemeSystem();
                    
                    // 初始化移动端歌词控制按钮状态
                    lyricsControlsMobile.style.display = 'none';
                } catch (error) {
                    console.error('初始化应用时出错:', error);
                    showError('应用初始化失败，请刷新页面重试');
                }
            }

            // 设置主题系统
            function setupThemeSystem() {
                try {
                    // 监听系统主题变化
                    if (window.matchMedia) {
                        const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');
                        
                        // 初始设置
                        updateThemeBasedOnSystem(mediaQuery);
                        
                        // 监听系统主题变化
                        mediaQuery.addEventListener('change', (e) => {
                            if (state.theme === 'auto') {
                                updateThemeBasedOnSystem(e);
                            }
                        });
                    }
                    
                    // 加载保存的主题设置
                    loadThemeSettings();
                } catch (error) {
                    console.error('设置主题系统时出错:', error);
                }
            }

            // 根据系统主题更新应用主题
            function updateThemeBasedOnSystem(mediaQuery) {
                try {
                    const isLightMode = mediaQuery.matches;
                    
                    if (isLightMode) {
                        document.documentElement.setAttribute('data-theme', 'light');
                        themeToggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
                    } else {
                        document.documentElement.setAttribute('data-theme', 'dark');
                        themeToggleBtn.innerHTML = '<i class="fas fa-moon"></i>';
                    }
                } catch (error) {
                    console.error('根据系统主题更新应用主题时出错:', error);
                }
            }

            // 加载主题设置
            function loadThemeSettings() {
                try {
                    const savedTheme = localStorage.getItem('yueyinge_theme');
                    if (savedTheme) {
                        state.theme = savedTheme;
                        themeSelect.value = savedTheme;
                        
                        if (savedTheme === 'auto') {
                            // 跟随系统
                            if (window.matchMedia) {
                                const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');
                                updateThemeBasedOnSystem(mediaQuery);
                            }
                        } else {
                            // 手动设置
                            document.documentElement.setAttribute('data-theme', savedTheme);
                            themeToggleBtn.innerHTML = savedTheme === 'light' ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
                        }
                    }
                    
                    // 更新主题选项预览
                    updateThemePreview();
                    
                    // 加载其他设置
                    const savedLanguage = localStorage.getItem('yueyinge_language');
                    if (savedLanguage) {
                        state.language = savedLanguage;
                        languageSelect.value = savedLanguage;
                    }
                    
                    const savedAudioQuality = localStorage.getItem('yueyinge_audio_quality');
                    if (savedAudioQuality) {
                        state.audioQuality = savedAudioQuality;
                        audioQuality.value = savedAudioQuality;
                    }
                    
                    const savedAutoPlay = localStorage.getItem('yueyinge_auto_play');
                    if (savedAutoPlay) {
                        state.autoPlay = savedAutoPlay;
                        autoPlay.value = savedAutoPlay;
                    }
                    
                    const savedCacheSize = localStorage.getItem('yueyinge_cache_size');
                    if (savedCacheSize) {
                        state.cacheSize = savedCacheSize;
                        cacheSize.value = savedCacheSize;
                    }
                } catch (error) {
                    console.error('加载主题设置时出错:', error);
                }
            }

            // 更新主题预览
            function updateThemePreview() {
                try {
                    themeOptions.forEach(option => {
                        option.classList.remove('active');
                        if (option.dataset.theme === state.theme) {
                            option.classList.add('active');
                        }
                    });
                } catch (error) {
                    console.error('更新主题预览时出错:', error);
                }
            }

            // 切换主题
            function toggleTheme() {
                try {
                    if (state.theme === 'dark') {
                        state.theme = 'light';
                        document.documentElement.setAttribute('data-theme', 'light');
                        themeToggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
                    } else {
                        state.theme = 'dark';
                        document.documentElement.setAttribute('data-theme', 'dark');
                        themeToggleBtn.innerHTML = '<i class="fas fa-moon"></i>';
                    }
                    
                    // 保存设置
                    localStorage.setItem('yueyinge_theme', state.theme);
                    themeSelect.value = state.theme;
                    updateThemePreview();
                } catch (error) {
                    console.error('切换主题时出错:', error);
                }
            }

            // 设置键盘快捷键
            function setupKeyboardShortcuts() {
                try {
                    document.addEventListener('keydown', function(e) {
                        // 忽略在输入框中的按键
                        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
                            return;
                        }

                        // 全屏模式切换
                        if (e.key === 'q' || e.key === 'Q') {
                            e.preventDefault();
                            enterFullscreen();
                        } else if (e.key === 'f' || e.key === 'F' || e.key === 'Escape') {
                            e.preventDefault();
                            exitFullscreen();
                        }

                        // 播放控制
                        if (e.key === ' ') {
                            e.preventDefault();
                            togglePlay();
                        } else if (e.key === 'ArrowLeft') {
                            e.preventDefault();
                            playPrev();
                        } else if (e.key === 'ArrowRight') {
                            e.preventDefault();
                            playNext();
                        } else if (e.key === 'l' || e.key === 'L') {
                            e.preventDefault();
                            toggleLyrics();
                        }

                        // 主题切换
                        if (e.key === 't' || e.key === 'T') {
                            e.preventDefault();
                            toggleTheme();
                        }

                        // 数字键1-20播放对应歌曲
                        if (e.key >= '1' && e.key <= '9') {
                            const index = parseInt(e.key) - 1;
                            if (index < state.songs.length) {
                                playSong(index);
                            }
                        } else if (e.key >= '0' && e.key <= '9' && e.shiftKey) {
                            // 处理10-20的数字
                            const index = parseInt(e.key) + 10;
                            if (index < state.songs.length) {
                                playSong(index);
                            }
                        }

                        // 显示快捷键提示
                        if (e.key === 'h' || e.key === 'H') {
                            e.preventDefault();
                            shortcutHint.classList.toggle('show');
                        }
                    });
                } catch (error) {
                    console.error('设置键盘快捷键时出错:', error);
                }
            }

            // 进入全屏模式
            function enterFullscreen() {
                try {
                    state.isFullscreen = true;
                    fullscreenOverlay.classList.add('active');
                    document.body.classList.add('fullscreen');
                    
                    // 更新全屏界面信息
                    if (state.currentSongIndex >= 0 && state.currentSongIndex < state.songs.length) {
                        const song = state.songs[state.currentSongIndex];
                        fullscreenTitle.textContent = song.name;
                        fullscreenArtist.textContent = song.artist;
                    }
                    
                    // 更新全屏歌词
                    updateFullscreenLyrics();
                    
                    // 更新全屏播放按钮
                    updateFullscreenPlayButton();
                } catch (error) {
                    console.error('进入全屏模式时出错:', error);
                }
            }

            // 退出全屏模式
            function exitFullscreen() {
                try {
                    state.isFullscreen = false;
                    fullscreenOverlay.classList.remove('active');
                    document.body.classList.remove('fullscreen');
                } catch (error) {
                    console.error('退出全屏模式时出错:', error);
                }
            }

            // 更新全屏播放按钮
            function updateFullscreenPlayButton() {
                try {
                    const icon = state.isPlaying ? 'fa-pause' : 'fa-play';
                    fullscreenPlayBtn.innerHTML = `<i class="fas ${icon}"></i>`;
                } catch (error) {
                    console.error('更新全屏播放按钮时出错:', error);
                }
            }

            // 更新全屏歌词
            function updateFullscreenLyrics() {
                try {
                    if (!state.lyrics || state.lyrics.length === 0) {
                        fullscreenLyrics.innerHTML = '<div class="no-lyrics"><i class="fas fa-music"></i><span>暂无歌词</span></div>';
                        return;
                    }
                    
                    let lyricsHTML = '';
                    state.lyrics.forEach((lyric, index) => {
                        const className = index === state.currentLyricIndex ? 'current-lyric' : '';
                        lyricsHTML += `<div class="${className}" data-index="${index}">${lyric.text}</div>`;
                    });
                    
                    fullscreenLyrics.innerHTML = lyricsHTML;
                    
                    // 滚动到当前歌词
                    const currentLyric = fullscreenLyrics.querySelector('.current-lyric');
                    if (currentLyric) {
                        currentLyric.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                } catch (error) {
                    console.error('更新全屏歌词时出错:', error);
                }
            }

            // 加载用户数据
            function loadUserData() {
                try {
                    const savedData = localStorage.getItem('yueyinge_user_data');
                    if (savedData) {
                        const data = JSON.parse(savedData);
                        
                        // 检查是否是新的一天，重置每日任务
                        const today = new Date().toDateString();
                        if (data.lastLoginDate !== today) {
                            // 新的一天，重置每日任务
                            state.dailyCheckinDone = false;
                            state.listenTimeToday = 0;
                            state.shareTaskDone = false;
                            state.favoriteTaskDone = false;
                            state.lastLoginDate = today;
                            state.listenPointsEarnedToday = 0; // 重置今日听歌积分
                        } else {
                            // 同一天，加载保存的任务状态
                            state.dailyCheckinDone = data.dailyCheckinDone || false;
                            state.listenTimeToday = data.listenTimeToday || 0;
                            state.shareTaskDone = data.shareTaskDone || false;
                            state.favoriteTaskDone = data.favoriteTaskDone || false;
                            state.listenPointsEarnedToday = data.listenPointsEarnedToday || 0;
                        }
                        
                        // 加载积分和VIP状态
                        state.points = data.points || 0;
                        state.isVip = data.isVip || false;
                        state.vipExpiry = data.vipExpiry ? new Date(data.vipExpiry) : null;
                        state.freeDownloads = data.freeDownloads || false;
                        
                        // 加载播放历史
                        state.playHistory = data.playHistory || [];
                        
                        // 更新最后登录日期
                        state.lastLoginDate = today;
                    } else {
                        // 首次使用，设置默认值
                        state.lastLoginDate = new Date().toDateString();
                        state.playHistory = [];
                        state.listenPointsEarnedToday = 0;
                    }
                    
                    // 保存数据
                    saveUserData();
                } catch (error) {
                    console.error('加载用户数据时出错:', error);
                }
            }

            // 保存用户数据
            function saveUserData() {
                try {
                    const data = {
                        points: state.points,
                        isVip: state.isVip,
                        vipExpiry: state.vipExpiry,
                        dailyCheckinDone: state.dailyCheckinDone,
                        listenTimeToday: state.listenTimeToday,
                        shareTaskDone: state.shareTaskDone,
                        favoriteTaskDone: state.favoriteTaskDone,
                        lastLoginDate: state.lastLoginDate,
                        freeDownloads: state.freeDownloads,
                        playHistory: state.playHistory,
                        listenPointsEarnedToday: state.listenPointsEarnedToday || 0
                    };
                    
                    localStorage.setItem('yueyinge_user_data', JSON.stringify(data));
                } catch (error) {
                    console.error('保存用户数据时出错:', error);
                }
            }

            // 检查VIP到期时间
            function checkVipExpiry() {
                try {
                    if (state.isVip && state.vipExpiry) {
                        const now = new Date();
                        if (now > state.vipExpiry) {
                            // VIP已过期
                            state.isVip = false;
                            state.vipExpiry = null;
                            updateVipUI();
                            saveUserData();
                            showError('您的VIP会员已到期');
                        }
                    }
                } catch (error) {
                    console.error('检查VIP到期时间时出错:', error);
                }
            }

            // 更新欢迎横幅
            function updateWelcomeBanner() {
                try {
                    const hour = new Date().getHours();
                    let greeting = '';
                    let subtitle = '';
                    
                    if (hour >= 5 && hour < 9) {
                        greeting = '早上好';
                        subtitle = '新的一天，让音乐唤醒你的活力';
                    } else if (hour >= 9 && hour < 12) {
                        greeting = '上午好';
                        subtitle = '工作学习之余，让音乐放松心情';
                    } else if (hour >= 12 && hour < 14) {
                        greeting = '中午好';
                        subtitle = '午餐时间，享受美食与音乐';
                    } else if (hour >= 14 && hour < 18) {
                        greeting = '下午好';
                        subtitle = '午后时光，让音乐陪伴你度过';
                    } else if (hour >= 18 && hour < 22) {
                        greeting = '晚上好';
                        subtitle = '让音乐点亮你的生活，发现更多精彩内容';
                    } else {
                        greeting = '深夜好';
                        subtitle = '夜深人静，让音乐抚慰你的心灵';
                    }
                    
                    welcomeTitle.textContent = `${greeting}，音乐爱好者`;
                    welcomeSubtitle.textContent = subtitle;
                } catch (error) {
                    console.error('更新欢迎横幅时出错:', error);
                }
            }

            // 加载用户头像
            function loadUserAvatar() {
                try {
                    const avatar = document.querySelector('.user-avatar img');
                    avatar.onerror = function() {
                        this.style.display = 'none';
                        this.nextElementSibling.style.display = 'flex';
                    };
                    
                    avatar.onload = function() {
                        this.nextElementSibling.style.display = 'none';
                    };
                } catch (error) {
                    console.error('加载用户头像时出错:', error);
                }
            }

            // 设置事件监听器
            function setupEventListeners() {
                try {
                    // 移动端菜单切换
                    mobileMenuToggle.addEventListener('click', toggleSidebar);

                    // 修复：点击侧边栏外部关闭侧边栏
                    document.addEventListener('click', function(e) {
                        if (window.innerWidth <= 992 && sidebar.classList.contains('active') && 
                            !sidebar.contains(e.target) && e.target !== mobileMenuToggle) {
                            toggleSidebar();
                        }
                    });

                    // 搜索功能
                    searchInput.addEventListener('input', handleSearchInput);
                    searchInput.addEventListener('focus', showSearchSuggestions);
                    document.addEventListener('click', hideSearchSuggestions);
                    
                    // 开发者模式激活
                    searchInput.addEventListener('keydown', function(e) {
                        if (e.key === 'Enter' && searchInput.value === '20150617fcm#') {
                            e.preventDefault();
                            activateDevMode();
                            searchInput.value = '';
                        }
                    });

                    // 播放控制
                    playBtn.addEventListener('click', togglePlay);
                    prevBtn.addEventListener('click', playPrev);
                    nextBtn.addEventListener('click', playNext);
                    shuffleBtn.addEventListener('click', toggleShuffle);
                    repeatBtn.addEventListener('click', toggleRepeat);

                    // 移动端控制按钮
                    mobilePrevBtn.addEventListener('click', playPrev);
                    mobilePlayBtn.addEventListener('click', togglePlay);
                    mobileNextBtn.addEventListener('click', playNext);
                    mobileLyricsBtn.addEventListener('click', toggleLyrics);

                    // 进度条控制
                    progressBar.addEventListener('click', seek);

                    // 音量控制
                    volumeBtn.addEventListener('click', toggleMute);
                    volumeSlider.addEventListener('input', changeVolume);

                    // 歌词面板
                    toggleLyricsBtn.addEventListener('click', toggleLyrics);
                    closeLyricsBtn.addEventListener('click', toggleLyrics);

                    // 移动端歌词控制
                    mobileLyricsPrevBtn.addEventListener('click', playPrev);
                    mobileLyricsPlayBtn.addEventListener('click', togglePlay);
                    mobileLyricsNextBtn.addEventListener('click', playNext);
                    mobileLyricsCloseBtn.addEventListener('click', toggleLyrics);

                    // VIP选项
                    vipOptions.forEach(option => {
                        if (option.id !== 'customVipOption') {
                            option.addEventListener('click', () => {
                                const days = parseInt(option.dataset.days);
                                const cost = parseInt(option.dataset.cost);
                                const bonus = parseInt(option.dataset.bonus);
                                exchangeVip(days, cost, bonus);
                            });
                        }
                    });

                    // 自定义VIP选项
                    customVipOption.addEventListener('click', showCustomVipPanel);
                    closeCustomVipBtn.addEventListener('click', hideCustomVipPanel);
                    customVipDays.addEventListener('input', updateCustomVipCost);
                    customVipConfirm.addEventListener('click', confirmCustomVip);

                    // 下载面板
                    toggleDownloadBtn.addEventListener('click', toggleDownload);
                    closeDownloadBtn.addEventListener('click', toggleDownload);
                    downloadsLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        toggleDownload();
                    });

                    // 播放历史
                    historyLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        loadPlayHistory();
                    });

                    // 设置链接
                    settingsLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        showSettingsPanel();
                    });

                    // 下载按钮
                    downloadLyricsBtn.addEventListener('click', downloadLyrics);
                    downloadSongBtn.addEventListener('click', downloadSong);
                    downloadAlbumBtn.addEventListener('click', downloadAlbum);
                    downloadCoverBtn.addEventListener('click', downloadCover);

                    // 歌词格式选择
                    formatBtns.forEach(btn => {
                        btn.addEventListener('click', function() {
                            formatBtns.forEach(b => b.classList.remove('active'));
                            this.classList.add('active');
                            state.lyricsDownloadFormat = this.dataset.format;
                        });
                    });

                    // 积分任务
                    dailyCheckinBtn.addEventListener('click', doDailyCheckin);
                    shareTaskBtn.addEventListener('click', doShareTask);
                    favoriteTaskBtn.addEventListener('click', doFavoriteTask);
                    upgradeBtn.addEventListener('click', showVipUpgrade);

                    // 开发者模式
                    closeDevBtn.addEventListener('click', closeDevPanel);
                    setPointsBtn.addEventListener('click', setPoints);
                    // 新增：增加积分按钮事件
                    addPointsBtn.addEventListener('click', addPoints);
                    setVipBtn.addEventListener('click', setVip);
                    setVipDaysBtn.addEventListener('click', setVipDays);
                    setVipTypeBtn.addEventListener('click', setVipType);
                    toggleFreeDownloadsBtn.addEventListener('click', toggleFreeDownloads);
                    resetTasksBtn.addEventListener('click', resetTasks);

                    // 下载进度提示
                    downloadProgressClose.addEventListener('click', hideDownloadProgress);

                    // 全屏模式
                    fullscreenToggleBtn.addEventListener('click', enterFullscreen);
                    fullscreenPrevBtn.addEventListener('click', playPrev);
                    fullscreenPlayBtn.addEventListener('click', togglePlay);
                    fullscreenNextBtn.addEventListener('click', playNext);
                    fullscreenExitBtn.addEventListener('click', exitFullscreen);

                    // 主题切换
                    themeToggleBtn.addEventListener('click', toggleTheme);

                    // 设置面板
                    closeSettingsBtn.addEventListener('click', closeSettingsPanel);
                    themeSelect.addEventListener('change', handleThemeChange);
                    themeOptions.forEach(option => {
                        option.addEventListener('click', function() {
                            const theme = this.dataset.theme;
                            state.theme = theme;
                            themeSelect.value = theme;
                            handleThemeChange();
                            updateThemePreview();
                        });
                    });
                    languageSelect.addEventListener('change', handleLanguageChange);
                    audioQuality.addEventListener('change', handleAudioQualityChange);
                    autoPlay.addEventListener('change', handleAutoPlayChange);
                    cacheSize.addEventListener('change', handleCacheSizeChange);

                    // 音乐源选择
                    sourceBtns.forEach(btn => {
                        btn.addEventListener('click', () => {
                            sourceBtns.forEach(b => b.classList.remove('active'));
                            btn.classList.add('active');
                            state.currentSource = btn.dataset.source;
                            if (state.currentView === 'search' && searchInput.value.trim()) {
                                performSearch();
                            } else if (state.currentView === 'default') {
                                loadDefaultSongs();
                            }
                        });
                    });

                    // 音频事件监听
                    state.audioPlayer.addEventListener('loadedmetadata', () => {
                        duration.textContent = formatTime(state.audioPlayer.duration);
                    });
                    
                    state.audioPlayer.addEventListener('timeupdate', () => {
                        const currentTime = state.audioPlayer.currentTime;
                        const duration = state.audioPlayer.duration;
                        
                        if (duration) {
                            const progressPercent = (currentTime / duration) * 100;
                            progress.style.width = `${progressPercent}%`;
                            document.getElementById('currentTime').textContent = formatTime(currentTime);
                            
                            // 更新歌词
                            updateLyrics(currentTime);
                            
                            // 更新听歌时间
                            updateListenTime();
                        }
                    });
                    
                    state.audioPlayer.addEventListener('ended', () => {
                        if (state.repeatMode === 'one') {
                            state.audioPlayer.currentTime = 0;
                            state.audioPlayer.play();
                        } else {
                            playNext();
                        }
                    });
                    
                    // 修复：音频错误处理
                    state.audioPlayer.addEventListener('error', (e) => {
                        console.error('音频播放错误:', e);
                        showError('播放错误，可能是音源不可用，请尝试其他歌曲');
                        
                        // 重置播放状态
                        state.isPlaying = false;
                        updatePlayButton();
                        updateFullscreenPlayButton();
                        updateMobilePlayButton();
                        
                        // 修复：清除音频源，防止重复错误
                        state.audioPlayer.src = '';
                    });

                    // 设置初始音量
                    state.audioPlayer.volume = volumeSlider.value / 100;
                } catch (error) {
                    console.error('设置事件监听器时出错:', error);
                }
            }

            // 显示设置面板
            function showSettingsPanel() {
                try {
                    settingsPanel.classList.add('open');
                } catch (error) {
                    console.error('显示设置面板时出错:', error);
                }
            }

            // 关闭设置面板
            function closeSettingsPanel() {
                try {
                    settingsPanel.classList.remove('open');
                } catch (error) {
                    console.error('关闭设置面板时出错:', error);
                }
            }

            // 处理主题变更
            function handleThemeChange() {
                try {
                    const theme = themeSelect.value;
                    state.theme = theme;
                    
                    if (theme === 'auto') {
                        // 跟随系统
                        if (window.matchMedia) {
                            const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');
                            updateThemeBasedOnSystem(mediaQuery);
                        }
                    } else {
                        // 手动设置
                        document.documentElement.setAttribute('data-theme', theme);
                        themeToggleBtn.innerHTML = theme === 'light' ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
                    }
                    
                    // 保存设置
                    localStorage.setItem('yueyinge_theme', theme);
                    updateThemePreview();
                } catch (error) {
                    console.error('处理主题变更时出错:', error);
                }
            }

            // 处理语言变更
            function handleLanguageChange() {
                try {
                    const language = languageSelect.value;
                    state.language = language;
                    localStorage.setItem('yueyinge_language', language);
                    showSuccess('语言设置已保存，重启应用后生效');
                } catch (error) {
                    console.error('处理语言变更时出错:', error);
                }
            }

            // 处理音频质量变更
            function handleAudioQualityChange() {
                try {
                    const quality = audioQuality.value;
                    state.audioQuality = quality;
                    localStorage.setItem('yueyinge_audio_quality', quality);
                    showSuccess('音频质量设置已保存');
                } catch (error) {
                    console.error('处理音频质量变更时出错:', error);
                }
            }

            // 处理自动播放变更
            function handleAutoPlayChange() {
                try {
                    const autoPlaySetting = autoPlay.value;
                    state.autoPlay = autoPlaySetting;
                    localStorage.setItem('yueyinge_auto_play', autoPlaySetting);
                    showSuccess('自动播放设置已保存');
                } catch (error) {
                    console.error('处理自动播放变更时出错:', error);
                }
            }

            // 处理缓存大小变更
            function handleCacheSizeChange() {
                try {
                    const cacheSizeSetting = cacheSize.value;
                    state.cacheSize = cacheSizeSetting;
                    localStorage.setItem('yueyinge_cache_size', cacheSizeSetting);
                    showSuccess('缓存大小设置已保存');
                } catch (error) {
                    console.error('处理缓存大小变更时出错:', error);
                }
            }

            // 加载默认歌曲
            function loadDefaultSongs() {
                try {
                    // 显示加载指示器
                    loadingIndicator.style.display = 'flex';
                    hideError();
                    
                    // 更新视图状态
                    state.currentView = 'default';
                    playlistTitle.textContent = '推荐歌单';
                    
                    // 模拟一些默认歌曲数据
                    setTimeout(() => {
                        state.songs = [
                            {
                                id: '1330348068',
                                name: '起风了',
                                artist: '买辣椒也用券',
                                album: '起风了',
                                duration: '5:25',
                                pic_id: '109951163699673355',
                                lyric_id: '1330348068',
                                source: 'netease'
                            },
                            {
                                id: '1811924206',
                                name: '星辰大海',
                                artist: '黄霄雲',
                                album: '星辰大海',
                                duration: '3:27',
                                pic_id: '109951165588539137',
                                lyric_id: '1811924206',
                                source: 'netease'
                            },
                            {
                                id: '449818741',
                                name: '光年之外',
                                artist: 'G.E.M.邓紫棋',
                                album: '光年之外',
                                duration: '3:55',
                                pic_id: '18587244069235039',
                                lyric_id: '449818741',
                                source: 'netease'
                            },
                            {
                                id: '1413863166',
                                name: '少年',
                                artist: '梦然',
                                album: '少年',
                                duration: '3:55',
                                pic_id: '5639395138885805',
                                lyric_id: '1413863166',
                                source: 'netease'
                            },
                            {
                                id: '1859245776',
                                name: '稻香',
                                artist: '周杰伦',
                                album: '魔杰座',
                                duration: '3:43',
                                pic_id: '109951168229162373',
                                lyric_id: '1859245776',
                                source: 'netease'
                            }
                        ];
                        
                        renderSongList();
                        loadingIndicator.style.display = 'none';
                    }, 1000);
                } catch (error) {
                    console.error('加载默认歌曲时出错:', error);
                    loadingIndicator.style.display = 'none';
                    showError('加载歌曲失败，请检查网络连接');
                }
            }

            // 加载播放历史
            function loadPlayHistory() {
                try {
                    // 显示加载指示器
                    loadingIndicator.style.display = 'flex';
                    hideError();
                    
                    // 更新视图状态
                    state.currentView = 'history';
                    playlistTitle.textContent = '播放历史';
                    
                    if (state.playHistory.length === 0) {
                        songList.innerHTML = '<div class="no-lyrics"><i class="fas fa-history"></i><span>暂无播放历史</span></div>';
                        loadingIndicator.style.display = 'none';
                        return;
                    }
                    
                    // 显示播放历史
                    state.songs = state.playHistory;
                    renderSongList();
                    loadingIndicator.style.display = 'none';
                } catch (error) {
                    console.error('加载播放历史时出错:', error);
                    loadingIndicator.style.display = 'none';
                }
            }

            // 添加播放历史
            function addToPlayHistory(song) {
                try {
                    // 检查是否已在历史记录中
                    const existingIndex = state.playHistory.findIndex(s => s.id === song.id && s.source === song.source);
                    
                    // 如果已存在，先移除
                    if (existingIndex !== -1) {
                        state.playHistory.splice(existingIndex, 1);
                    }
                    
                    // 添加到历史记录开头
                    state.playHistory.unshift(song);
                    
                    // 限制历史记录数量（最多50条）
                    if (state.playHistory.length > 50) {
                        state.playHistory.pop();
                    }
                    
                    // 保存数据
                    saveUserData();
                } catch (error) {
                    console.error('添加播放历史时出错:', error);
                }
            }

            // 切换侧边栏（移动端）
            function toggleSidebar() {
                try {
                    sidebar.classList.toggle('active');
                } catch (error) {
                    console.error('切换侧边栏时出错:', error);
                }
            }

            // 处理搜索输入
            function handleSearchInput() {
                try {
                    const query = searchInput.value.trim();
                    
                    if (query.length === 0) {
                        hideSearchSuggestions();
                        if (state.currentView !== 'history') {
                            loadDefaultSongs();
                        }
                        return;
                    }
                    
                    showSearchSuggestions();
                    updateSearchSuggestions(query);
                    
                    // 清除之前的超时
                    clearTimeout(window.searchTimeout);
                    
                    // 设置新的搜索超时
                    window.searchTimeout = setTimeout(() => {
                        performSearch();
                    }, 500);
                } catch (error) {
                    console.error('处理搜索输入时出错:', error);
                }
            }

            // 显示搜索建议
            function showSearchSuggestions() {
                try {
                    searchSuggestions.style.display = 'block';
                } catch (error) {
                    console.error('显示搜索建议时出错:', error);
                }
            }

            // 隐藏搜索建议
            function hideSearchSuggestions(e) {
                try {
                    if (!e || !searchSuggestions.contains(e.target)) {
                        searchSuggestions.style.display = 'none';
                    }
                } catch (error) {
                    console.error('隐藏搜索建议时出错:', error);
                }
            }

            // 更新搜索建议
            function updateSearchSuggestions(query) {
                try {
                    const suggestions = [
                        { text: `搜索 "${query}"`, icon: 'search', type: 'search' },
                        { text: `"${query}" 的歌曲`, icon: 'music', type: 'song' },
                        { text: `"${query}" 的歌手`, icon: 'user', type: 'artist' }
                    ];
                    
                    let html = '';
                    suggestions.forEach(suggestion => {
                        html += `
                            <div class="search-suggestion" data-type="${suggestion.type}">
                                <i class="fas fa-${suggestion.icon}"></i>
                                <span>${suggestion.text}</span>
                            </div>
                        `;
                    });
                    
                    searchSuggestions.innerHTML = html;
                    
                    // 添加点击事件
                    const suggestionItems = searchSuggestions.querySelectorAll('.search-suggestion');
                    suggestionItems.forEach(item => {
                        item.addEventListener('click', () => {
                            performSearch();
                            hideSearchSuggestions();
                        });
                    });
                } catch (error) {
                    console.error('更新搜索建议时出错:', error);
                }
            }

            // 执行搜索
            function performSearch() {
                try {
                    const query = searchInput.value.trim();
                    
                    if (query.length === 0) {
                        return;
                    }
                    
                    // 显示加载指示器
                    loadingIndicator.style.display = 'flex';
                    hideError();
                    
                    // 更新视图状态
                    state.currentView = 'search';
                    playlistTitle.textContent = `搜索结果: ${query}`;
                    
                    // 执行搜索
                    searchSongs(query, state.currentSource)
                        .then(results => {
                            loadingIndicator.style.display = 'none';
                            
                            if (results && results.length > 0) {
                                state.songs = results;
                                renderSongList();
                            } else {
                                showError('未找到相关歌曲，请尝试其他关键词或音乐源');
                                state.songs = [];
                                songList.innerHTML = '';
                            }
                        })
                        .catch(error => {
                            console.error('搜索失败:', error);
                            showError('搜索失败，请检查网络连接或尝试其他音乐源');
                            loadingIndicator.style.display = 'none';
                            state.songs = [];
                            songList.innerHTML = '';
                        });
                } catch (error) {
                    console.error('执行搜索时出错:', error);
                    loadingIndicator.style.display = 'none';
                }
            }

            // 搜索歌曲
            function searchSongs(query, source) {
                return new Promise((resolve, reject) => {
                    const params = new URLSearchParams({
                        types: 'search',
                        source: source,
                        name: query,
                        count: '20',
                        pages: '1'
                    });
                    
                    fetch(`${API_BASE_URL}?${params}`)
                        .then(response => response.json())
                        .then(data => {
                            if (Array.isArray(data)) {
                                const songs = data.map(song => ({
                                    name: song.name || '未知歌曲',
                                    artist: Array.isArray(song.artist) ? song.artist.join(', ') : song.artist || '未知艺人',
                                    id: song.id,
                                    source: song.source,
                                    album: song.album || '未知专辑',
                                    pic_id: song.pic_id,
                                    lyric_id: song.lyric_id || song.id,
                                    duration: '--:--'
                                })).filter(song => song.name !== '未知歌曲');
                                
                                resolve(songs);
                            } else {
                                reject(new Error('API返回数据格式错误'));
                            }
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            }

            // 渲染歌曲列表
            function renderSongList() {
                try {
                    let html = '';
                    
                    if (state.songs.length === 0) {
                        songList.innerHTML = '<div class="no-lyrics"><i class="fas fa-music"></i><span>暂无歌曲</span></div>';
                        return;
                    }
                    
                    state.songs.forEach((song, index) => {
                        html += `
                            <div class="song-item ${index === state.currentSongIndex ? 'active' : ''}" data-index="${index}">
                                <div class="song-number">${index + 1}</div>
                                <div class="song-info">
                                    <div class="song-name">${song.name}</div>
                                    <div class="song-artist">${song.artist}</div>
                                </div>
                                <div class="song-duration">${song.duration}</div>
                                <div class="song-actions">
                                    <button class="song-action-btn" data-action="play" title="播放">
                                        <i class="fas fa-play"></i>
                                    </button>
                                    <button class="song-action-btn" data-action="like" title="喜欢">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="song-action-btn" data-action="download" title="下载">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </div>
                            </div>
                        `;
                    });
                    
                    songList.innerHTML = html;
                    
                    // 添加点击事件
                    const songItems = songList.querySelectorAll('.song-item');
                    songItems.forEach((item, index) => {
                        item.addEventListener('click', (e) => {
                            if (!e.target.closest('.song-actions')) {
                                playSong(index);
                            }
                        });
                        
                        // 添加按钮事件
                        const playBtn = item.querySelector('[data-action="play"]');
                        playBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            playSong(index);
                        });
                        
                        const likeBtn = item.querySelector('[data-action="like"]');
                        likeBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            likeBtn.querySelector('i').classList.toggle('far');
                            likeBtn.querySelector('i').classList.toggle('fas');
                        });
                        
                        const downloadBtn = item.querySelector('[data-action="download"]');
                        downloadBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            state.currentSongIndex = index;
                            toggleDownload();
                        });
                    });
                } catch (error) {
                    console.error('渲染歌曲列表时出错:', error);
                }
            }

            // 播放歌曲
            function playSong(index) {
                try {
                    if (index < 0 || index >= state.songs.length) {
                        console.error('无效的歌曲索引:', index);
                        return;
                    }
                    
                    state.currentSongIndex = index;
                    const song = state.songs[index];
                    
                    // 添加到播放历史
                    addToPlayHistory(song);
                    
                    // 更新播放器UI
                    document.querySelector('.player-song-title').textContent = song.name;
                    document.querySelector('.player-song-artist').textContent = song.artist;
                    
                    // 更新全屏界面信息
                    if (state.isFullscreen) {
                        fullscreenTitle.textContent = song.name;
                        fullscreenArtist.textContent = song.artist;
                    }
                    
                    // 更新专辑图片
                    const playerAlbumArt = document.querySelector('.player-album-art');
                    if (song.pic_id) {
                        getAlbumPic(song.pic_id, song.source).then(picUrl => {
                            if (picUrl) {
                                playerAlbumArt.innerHTML = `<img src="${picUrl}" alt="${song.album}" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-music\\'></i>'">`;
                            } else {
                                playerAlbumArt.innerHTML = '<i class="fas fa-music"></i>';
                            }
                        }).catch(() => {
                            playerAlbumArt.innerHTML = '<i class="fas fa-music"></i>';
                        });
                    } else {
                        playerAlbumArt.innerHTML = '<i class="fas fa-music"></i>';
                    }
                    
                    // 更新歌曲列表中的活跃状态
                    document.querySelectorAll('.song-item').forEach((item, i) => {
                        if (i === index) {
                            item.classList.add('active');
                        } else {
                            item.classList.remove('active');
                        }
                    });
                    
                    // 加载音频
                    getSongUrl(song.id, song.source).then(url => {
                        if (url) {
                            state.audioPlayer.src = url;
                            state.audioPlayer.play().then(() => {
                                state.isPlaying = true;
                                updatePlayButton();
                                updateFullscreenPlayButton();
                                updateMobilePlayButton();
                                
                                // 加载歌词
                                loadLyrics(song);
                                
                                // 隐藏错误消息
                                hideError();
                            }).catch(e => {
                                console.error('播放失败:', e);
                                showError('播放失败，可能是音源不可用，请尝试其他歌曲');
                                state.isPlaying = false;
                                updatePlayButton();
                                updateFullscreenPlayButton();
                                updateMobilePlayButton();
                            });
                        } else {
                            showError('无法获取音频URL，请尝试其他歌曲');
                        }
                    }).catch(error => {
                        console.error('音频加载失败:', error);
                        showError('音频加载失败，请尝试其他歌曲');
                    });
                } catch (error) {
                    console.error('播放歌曲时出错:', error);
                }
            }

            // 获取歌曲URL
            function getSongUrl(songId, source) {
                return new Promise((resolve, reject) => {
                    const params = new URLSearchParams({
                        types: 'url',
                        source: source,
                        id: songId,
                        br: '320'
                    });
                    
                    fetch(`${API_BASE_URL}?${params}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.url) {
                                resolve(data.url);
                            } else {
                                reject(new Error('无法获取音频URL'));
                            }
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            }

            // 获取专辑图片
            function getAlbumPic(picId, source) {
                return new Promise((resolve, reject) => {
                    const params = new URLSearchParams({
                        types: 'pic',
                        source: source,
                        id: picId,
                        size: '500'
                    });
                    
                    fetch(`${API_BASE_URL}?${params}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.url) {
                                resolve(data.url);
                            } else {
                                reject(new Error('无法获取专辑图片'));
                            }
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            }

            // 获取歌词
            function getLyrics(lyricId, source) {
                return new Promise((resolve, reject) => {
                    const params = new URLSearchParams({
                        types: 'lyric',
                        source: source,
                        id: lyricId
                    });
                    
                    fetch(`${API_BASE_URL}?${params}`)
                        .then(response => response.json())
                        .then(data => {
                            resolve(data);
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            }

            // 加载歌词
            function loadLyrics(song) {
                try {
                    // 重置歌词状态
                    state.lyrics = [];
                    state.currentLyricIndex = -1;
                    
                    // 获取歌词
                    getLyrics(song.lyric_id || song.id, song.source)
                        .then(lrcData => {
                            if (lrcData.lyric) {
                                parseLyrics(lrcData.lyric);
                            } else {
                                // 如果没有歌词，显示默认提示
                                state.lyrics = [];
                                updateLyricsUI();
                                updateFullscreenLyrics();
                            }
                        })
                        .catch(error => {
                            console.error('歌词加载失败:', error);
                            state.lyrics = [];
                            updateLyricsUI();
                            updateFullscreenLyrics();
                        });
                } catch (error) {
                    console.error('加载歌词时出错:', error);
                }
            }

            // 解析歌词
            function parseLyrics(lrcText) {
                try {
                    state.lyrics = [];
                    
                    // 分割歌词行
                    const lines = lrcText.split('\n');
                    
                    // 解析每行歌词
                    lines.forEach(line => {
                        // 匹配时间标签
                        const timeMatches = line.match(/\[(\d+):(\d+)\.(\d+)\]/g);
                        
                        if (timeMatches) {
                            // 提取歌词文本
                            const text = line.replace(/\[.*?\]/g, '').trim();
                            
                            if (text) {
                                // 解析每个时间标签
                                timeMatches.forEach(timeTag => {
                                    const match = timeTag.match(/\[(\d+):(\d+)\.(\d+)\]/);
                                    if (match) {
                                        const minutes = parseInt(match[1]);
                                        const seconds = parseInt(match[2]);
                                        const milliseconds = parseInt(match[3]);
                                        
                                        const time = minutes * 60 + seconds + milliseconds / 100;
                                        
                                        state.lyrics.push({
                                            time: time,
                                            text: text
                                        });
                                    }
                                });
                            }
                        }
                    });
                    
                    // 按时间排序
                    state.lyrics.sort((a, b) => a.time - b.time);
                    
                    // 更新歌词UI
                    updateLyricsUI();
                    updateFullscreenLyrics();
                } catch (error) {
                    console.error('解析歌词时出错:', error);
                }
            }

            // 更新歌词显示
            function updateLyrics(currentTime) {
                try {
                    if (!state.lyrics || state.lyrics.length === 0) return;
                    
                    // 找到当前时间对应的歌词
                    let newIndex = -1;
                    for (let i = 0; i < state.lyrics.length; i++) {
                        if (state.lyrics[i].time <= currentTime) {
                            newIndex = i;
                        } else {
                            break;
                        }
                    }
                    
                    // 如果歌词索引发生变化，更新UI
                    if (newIndex !== state.currentLyricIndex) {
                        state.currentLyricIndex = newIndex;
                        updateLyricsUI();
                        
                        // 更新全屏歌词
                        if (state.isFullscreen) {
                            updateFullscreenLyrics();
                        }
                    }
                } catch (error) {
                    console.error('更新歌词显示时出错:', error);
                }
            }

            // 更新歌词UI - 优化部分
            function updateLyricsUI() {
                try {
                    if (!state.lyrics || state.lyrics.length === 0) {
                        lyricsContainer.innerHTML = '<div class="no-lyrics"><i class="fas fa-music"></i><span>暂无歌词</span></div>';
                        return;
                    }
                    
                    let lyricsHTML = '';
                    state.lyrics.forEach((lyric, index) => {
                        const className = index === state.currentLyricIndex ? 'current-lyric' : '';
                        lyricsHTML += `<div class="${className}" data-index="${index}">${lyric.text}</div>`;
                    });
                    
                    lyricsContainer.innerHTML = lyricsHTML;
                    
                    // 滚动到当前歌词
                    const currentLyric = lyricsContainer.querySelector('.current-lyric');
                    if (currentLyric) {
                        currentLyric.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                } catch (error) {
                    console.error('更新歌词UI时出错:', error);
                }
            }

            // 切换播放状态
            function togglePlay() {
                try {
                    if (!state.audioPlayer.src) {
                        // 如果没有歌曲加载，播放第一首歌曲
                        if (state.songs.length > 0) {
                            playSong(0);
                        } else {
                            showError('请先搜索并选择一首歌曲');
                        }
                        return;
                    }
                    
                    if (state.isPlaying) {
                        state.audioPlayer.pause();
                    } else {
                        state.audioPlayer.play().catch(e => {
                            console.error('播放失败:', e);
                            showError('播放失败，可能是音源不可用，请尝试其他歌曲');
                        });
                    }
                    
                    state.isPlaying = !state.isPlaying;
                    updatePlayButton();
                    updateFullscreenPlayButton();
                    updateMobilePlayButton();
                } catch (error) {
                    console.error('切换播放状态时出错:', error);
                }
            }

            // 更新播放按钮
            function updatePlayButton() {
                try {
                    const icon = state.isPlaying ? 'fa-pause' : 'fa-play';
                    playBtn.innerHTML = `<i class="fas ${icon}"></i>`;
                } catch (error) {
                    console.error('更新播放按钮时出错:', error);
                }
            }

            // 更新移动端播放按钮
            function updateMobilePlayButton() {
                try {
                    const icon = state.isPlaying ? 'fa-pause' : 'fa-play';
                    mobilePlayBtn.innerHTML = `<i class="fas ${icon}"></i>`;
                    mobileLyricsPlayBtn.innerHTML = `<i class="fas ${icon}"></i>`;
                } catch (error) {
                    console.error('更新移动端播放按钮时出错:', error);
                }
            }

            // 播放上一首
            function playPrev() {
                try {
                    if (state.songs.length === 0) return;
                    
                    let newIndex;
                    if (state.isShuffled) {
                        newIndex = Math.floor(Math.random() * state.songs.length);
                    } else {
                        newIndex = (state.currentSongIndex - 1 + state.songs.length) % state.songs.length;
                    }
                    
                    playSong(newIndex);
                } catch (error) {
                    console.error('播放上一首时出错:', error);
                }
            }

            // 播放下一首
            function playNext() {
                try {
                    if (state.songs.length === 0) return;
                    
                    let newIndex;
                    if (state.isShuffled) {
                        newIndex = Math.floor(Math.random() * state.songs.length);
                    } else {
                        newIndex = (state.currentSongIndex + 1) % state.songs.length;
                    }
                    
                    playSong(newIndex);
                } catch (error) {
                    console.error('播放下一首时出错:', error);
                }
            }

            // 切换随机播放
            function toggleShuffle() {
                try {
                    state.isShuffled = !state.isShuffled;
                    shuffleBtn.style.color = state.isShuffled ? 'var(--primary)' : 'var(--gray)';
                } catch (error) {
                    console.error('切换随机播放时出错:', error);
                }
            }

            // 切换循环模式
            function toggleRepeat() {
                try {
                    const modes = ['off', 'one', 'all'];
                    const currentIndex = modes.indexOf(state.repeatMode);
                    state.repeatMode = modes[(currentIndex + 1) % modes.length];
                    
                    repeatBtn.classList.remove('active', 'one');
                    if (state.repeatMode === 'one') {
                        repeatBtn.classList.add('active', 'one');
                    } else if (state.repeatMode === 'all') {
                        repeatBtn.classList.add('active');
                    }
                } catch (error) {
                    console.error('切换循环模式时出错:', error);
                }
            }

            // 跳转进度
            function seek(e) {
                try {
                    if (!state.audioPlayer.src || !state.audioPlayer.duration) return;
                    
                    const progressBarRect = progressBar.getBoundingClientRect();
                    const clickX = e.clientX - progressBarRect.left;
                    const progressBarWidth = progressBarRect.width;
                    const duration = state.audioPlayer.duration;
                    
                    const newTime = (clickX / progressBarWidth) * duration;
                    state.audioPlayer.currentTime = newTime;
                } catch (error) {
                    console.error('跳转进度时出错:', error);
                }
            }

            // 切换静音
            function toggleMute() {
                try {
                    state.isMuted = !state.isMuted;
                    state.audioPlayer.muted = state.isMuted;
                    
                    if (state.isMuted) {
                        volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
                    } else {
                        updateVolumeIcon();
                    }
                } catch (error) {
                    console.error('切换静音时出错:', error);
                }
            }

            // 改变音量
            function changeVolume() {
                try {
                    state.volume = volumeSlider.value;
                    state.audioPlayer.volume = state.volume / 100;
                    
                    if (state.volume == 0) {
                        state.isMuted = true;
                        state.audioPlayer.muted = true;
                        volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
                    } else {
                        state.isMuted = false;
                        state.audioPlayer.muted = false;
                        updateVolumeIcon();
                    }
                } catch (error) {
                    console.error('改变音量时出错:', error);
                }
            }

            // 更新音量图标
            function updateVolumeIcon() {
                try {
                    if (state.volume >= 50) {
                        volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
                    } else if (state.volume > 0) {
                        volumeBtn.innerHTML = '<i class="fas fa-volume-down"></i>';
                    } else {
                        volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
                    }
                } catch (error) {
                    console.error('更新音量图标时出错:', error);
                }
            }

            // 切换歌词面板
            function toggleLyrics() {
                try {
                    state.isLyricsVisible = !state.isLyricsVisible;
                    
                    if (state.isLyricsVisible) {
                        lyricsPanel.classList.add('open');
                        lyricsControlsMobile.style.display = 'flex';
                    } else {
                        lyricsPanel.classList.remove('open');
                        lyricsControlsMobile.style.display = 'none';
                    }
                } catch (error) {
                    console.error('切换歌词面板时出错:', error);
                }
            }

            // 切换下载面板
            function toggleDownload() {
                try {
                    state.isDownloadPanelOpen = !state.isDownloadPanelOpen;
                    
                    if (state.isDownloadPanelOpen) {
                        downloadPanel.classList.add('open');
                    } else {
                        downloadPanel.classList.remove('open');
                    }
                } catch (error) {
                    console.error('切换下载面板时出错:', error);
                }
            }

            // 显示自定义VIP面板
            function showCustomVipPanel() {
                try {
                    customVipPanel.classList.add('open');
                    updateCustomVipCost();
                } catch (error) {
                    console.error('显示自定义VIP面板时出错:', error);
                }
            }

            // 隐藏自定义VIP面板
            function hideCustomVipPanel() {
                try {
                    customVipPanel.classList.remove('open');
                } catch (error) {
                    console.error('隐藏自定义VIP面板时出错:', error);
                }
            }

            // 更新自定义VIP成本
            function updateCustomVipCost() {
                try {
                    const days = parseInt(customVipDays.value) || 1;
                    const cost = Math.max(days * 50, 50);
                    const bonus = calculateVipBonus(days);
                    
                    customVipCost.textContent = `花费: ${cost}积分`;
                    customVipBonus.textContent = `返${bonus}积分`;
                } catch (error) {
                    console.error('更新自定义VIP成本时出错:', error);
                }
            }

            // 计算VIP返积分
            function calculateVipBonus(days) {
                try {
                    if (days >= 365) return vipBonusConfig[365];
                    if (days >= 90) return vipBonusConfig[90];
                    if (days >= 30) return vipBonusConfig[30];
                    if (days >= 7) return vipBonusConfig[7];
                    return vipBonusConfig[1];
                } catch (error) {
                    console.error('计算VIP返积分时出错:', error);
                    return 0;
                }
            }

            // 确认自定义VIP兑换
            function confirmCustomVip() {
                try {
                    const days = parseInt(customVipDays.value) || 1;
                    const cost = Math.max(days * 50, 50);
                    const bonus = calculateVipBonus(days);
                    
                    exchangeVip(days, cost, bonus);
                    hideCustomVipPanel();
                } catch (error) {
                    console.error('确认自定义VIP兑换时出错:', error);
                }
            }

            // 兑换VIP
            function exchangeVip(days, cost, bonus) {
                try {
                    if (state.points < cost) {
                        showError(`积分不足，需要${cost}积分，当前只有${state.points}积分`);
                        return;
                    }
                    
                    // 扣除积分
                    state.points -= cost;
                    
                    // 设置VIP状态
                    state.isVip = true;
                    
                    // 计算VIP到期时间
                    if (days === 0) {
                        // 永久VIP
                        state.vipExpiry = null;
                    } else {
                        const now = new Date();
                        state.vipExpiry = new Date(now.getTime() + days * 24 * 60 * 60 * 1000);
                    }
                    
                    // 添加返积分
                    state.points += bonus;
                    
                    // 更新UI
                    updatePointsUI();
                    updateVipUI();
                    saveUserData();
                    
                    showSuccess(`成功兑换${days === 0 ? '永久' : days + '天'}VIP会员，获得${bonus}积分返还！`);
                } catch (error) {
                    console.error('兑换VIP时出错:', error);
                }
            }

            // 更新积分UI
            function updatePointsUI() {
                try {
                    pointsValue.textContent = state.points;
                } catch (error) {
                    console.error('更新积分UI时出错:', error);
                }
            }

            // 更新VIP UI
            function updateVipUI() {
                try {
                    if (state.isVip) {
                        vipIndicator.style.display = 'flex';
                        
                        if (state.vipExpiry) {
                            const now = new Date();
                            const diffTime = state.vipExpiry - now;
                            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                            vipTime.textContent = `${diffDays}天`;
                        } else {
                            vipTime.textContent = '永久';
                        }
                    } else {
                        vipIndicator.style.display = 'none';
                    }
                } catch (error) {
                    console.error('更新VIP UI时出错:', error);
                }
            }

            // 更新任务UI
            function updateTasksUI() {
                try {
                    // 更新每日签到按钮
                    if (state.dailyCheckinDone) {
                        dailyCheckinBtn.textContent = '已签到';
                        dailyCheckinBtn.classList.add('completed');
                        dailyCheckinBtn.disabled = true;
                    } else {
                        dailyCheckinBtn.textContent = '签到';
                        dailyCheckinBtn.classList.remove('completed');
                        dailyCheckinBtn.disabled = false;
                    }
                    
                    // 更新听歌进度
                    const minutes = Math.floor(state.listenTimeToday);
                    listenProgress.textContent = `${minutes}/30分钟`;
                    
                    // 更新分享任务按钮
                    if (state.shareTaskDone) {
                        shareTaskBtn.textContent = '已分享';
                        shareTaskBtn.classList.add('completed');
                        shareTaskBtn.disabled = true;
                    } else {
                        shareTaskBtn.textContent = '分享';
                        shareTaskBtn.classList.remove('completed');
                        shareTaskBtn.disabled = false;
                    }
                    
                    // 更新收藏任务按钮
                    if (state.favoriteTaskDone) {
                        favoriteTaskBtn.textContent = '已收藏';
                        favoriteTaskBtn.classList.add('completed');
                        favoriteTaskBtn.disabled = true;
                    } else {
                        favoriteTaskBtn.textContent = '收藏';
                        favoriteTaskBtn.classList.remove('completed');
                        favoriteTaskBtn.disabled = false;
                    }
                } catch (error) {
                    console.error('更新任务UI时出错:', error);
                }
            }

            // 更新听歌时间
            function updateListenTime() {
                try {
                    if (!state.isPlaying) return;
                    
                    // 每5秒增加一次听歌时间
                    if (!state.listenTimeTaskActive) {
                        state.listenTimeTaskActive = true;
                        
                        setTimeout(() => {
                            state.listenTimeToday += 5 / 60; // 5秒 = 5/60分钟
                            
                            // 每30分钟奖励5积分（每日上限50积分）
                            const totalMinutes = Math.floor(state.listenTimeToday);
                            const pointsToAdd = Math.floor(totalMinutes / 30) * 5;
                            
                            if (pointsToAdd > state.listenPointsEarnedToday && pointsToAdd <= 50) {
                                const actualPoints = pointsToAdd - state.listenPointsEarnedToday;
                                state.points += actualPoints;
                                state.listenPointsEarnedToday = pointsToAdd;
                                updatePointsUI();
                                saveUserData();
                                
                                if (actualPoints > 0) {
                                    showSuccess(`听歌奖励：获得${actualPoints}积分！`);
                                }
                            }
                            
                            updateTasksUI();
                            saveUserData();
                            state.listenTimeTaskActive = false;
                        }, 5000);
                    }
                } catch (error) {
                    console.error('更新听歌时间时出错:', error);
                    state.listenTimeTaskActive = false;
                }
            }

            // 每日签到
            function doDailyCheckin() {
                try {
                    if (state.dailyCheckinDone) {
                        showError('今日已签到，请明天再来');
                        return;
                    }
                    
                    // 随机签到积分10-20
                    const points = Math.floor(Math.random() * 11) + 10;
                    state.points += points;
                    state.dailyCheckinDone = true;
                    
                    updatePointsUI();
                    updateTasksUI();
                    saveUserData();
                    
                    showSuccess(`签到成功，获得${points}积分！`);
                } catch (error) {
                    console.error('每日签到时出错:', error);
                }
            }

            // 分享任务
            function doShareTask() {
                try {
                    if (state.shareTaskDone) {
                        showError('今日已分享，请明天再来');
                        return;
                    }
                    
                    state.points += 15;
                    state.shareTaskDone = true;
                    
                    updatePointsUI();
                    updateTasksUI();
                    saveUserData();
                    
                    showSuccess('分享成功，获得15积分！');
                } catch (error) {
                    console.error('分享任务时出错:', error);
                }
            }

            // 收藏任务
            function doFavoriteTask() {
                try {
                    if (state.favoriteTaskDone) {
                        showError('今日已收藏，请明天再来');
                        return;
                    }
                    
                    state.points += 20;
                    state.favoriteTaskDone = true;
                    
                    updatePointsUI();
                    updateTasksUI();
                    saveUserData();
                    
                    showSuccess('收藏成功，获得20积分！');
                } catch (error) {
                    console.error('收藏任务时出错:', error);
                }
            }

            // 显示VIP升级
            function showVipUpgrade() {
                try {
                    // 可以在这里添加VIP升级页面逻辑
                    showSuccess('VIP升级功能开发中...');
                } catch (error) {
                    console.error('显示VIP升级时出错:', error);
                }
            }

            // 下载歌词
            function downloadLyrics() {
                try {
                    if (state.currentSongIndex < 0) {
                        showError('请先选择一首歌曲');
                        return;
                    }
                    
                    const song = state.songs[state.currentSongIndex];
                    const cost = 10;
                    
                    if (!state.freeDownloads && !state.isVip && state.points < cost) {
                        showError(`积分不足，需要${cost}积分，当前只有${state.points}积分`);
                        return;
                    }
                    
                    // 扣除积分（如果不是VIP且不是免费下载）
                    if (!state.freeDownloads && !state.isVip) {
                        state.points -= cost;
                        updatePointsUI();
                        saveUserData();
                    }
                    
                    showDownloadProgress('歌词下载', '正在准备下载...');
                    
                    // 模拟下载过程
                    setTimeout(() => {
                        const lyricsText = state.lyrics.map(l => `[${formatLrcTime(l.time)}] ${l.text}`).join('\n');
                        const blob = new Blob([lyricsText], { type: 'text/plain' });
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = `${song.name} - ${song.artist}.${state.lyricsDownloadFormat}`;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        URL.revokeObjectURL(url);
                        
                        hideDownloadProgress();
                        showSuccess('歌词下载成功！');
                    }, 2000);
                } catch (error) {
                    console.error('下载歌词时出错:', error);
                    hideDownloadProgress();
                    showError('下载失败，请重试');
                }
            }

            // 下载歌曲
            function downloadSong() {
                try {
                    if (state.currentSongIndex < 0) {
                        showError('请先选择一首歌曲');
                        return;
                    }
                    
                    const song = state.songs[state.currentSongIndex];
                    const cost = 50;
                    
                    if (!state.freeDownloads && !state.isVip && state.points < cost) {
                        showError(`积分不足，需要${cost}积分，当前只有${state.points}积分`);
                        return;
                    }
                    
                    // 扣除积分（如果不是VIP且不是免费下载）
                    if (!state.freeDownloads && !state.isVip) {
                        state.points -= cost;
                        updatePointsUI();
                        saveUserData();
                    }
                    
                    showDownloadProgress('歌曲下载', '正在准备下载...');
                    
                    // 模拟下载过程
                    setTimeout(() => {
                        // 这里应该是实际的音频文件下载
                        // 由于跨域限制，这里只模拟下载
                        hideDownloadProgress();
                        showSuccess('歌曲下载成功！');
                    }, 3000);
                } catch (error) {
                    console.error('下载歌曲时出错:', error);
                    hideDownloadProgress();
                    showError('下载失败，请重试');
                }
            }

            // 下载专辑
            function downloadAlbum() {
                try {
                    if (state.currentSongIndex < 0) {
                        showError('请先选择一首歌曲');
                        return;
                    }
                    
                    const song = state.songs[state.currentSongIndex];
                    const cost = 20;
                    
                    if (!state.freeDownloads && !state.isVip && state.points < cost) {
                        showError(`积分不足，需要${cost}积分，当前只有${state.points}积分`);
                        return;
                    }
                    
                    // 扣除积分（如果不是VIP且不是免费下载）
                    if (!state.freeDownloads && !state.isVip) {
                        state.points -= cost;
                        updatePointsUI();
                        saveUserData();
                    }
                    
                    showDownloadProgress('专辑下载', '正在准备下载...');
                    
                    // 模拟下载过程
                    setTimeout(() => {
                        // 这里应该是实际的专辑图片下载
                        getAlbumPic(song.pic_id, song.source).then(url => {
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = `${song.album} - 专辑封面.jpg`;
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            
                            hideDownloadProgress();
                            showSuccess('专辑封面下载成功！');
                        }).catch(() => {
                            hideDownloadProgress();
                            showError('下载失败，无法获取专辑封面');
                        });
                    }, 2000);
                } catch (error) {
                    console.error('下载专辑时出错:', error);
                    hideDownloadProgress();
                    showError('下载失败，请重试');
                }
            }

            // 下载封面
            function downloadCover() {
                try {
                    if (state.currentSongIndex < 0) {
                        showError('请先选择一首歌曲');
                        return;
                    }
                    
                    const song = state.songs[state.currentSongIndex];
                    const cost = 15;
                    
                    if (!state.freeDownloads && !state.isVip && state.points < cost) {
                        showError(`积分不足，需要${cost}积分，当前只有${state.points}积分`);
                        return;
                    }
                    
                    // 扣除积分（如果不是VIP且不是免费下载）
                    if (!state.freeDownloads && !state.isVip) {
                        state.points -= cost;
                        updatePointsUI();
                        saveUserData();
                    }
                    
                    showDownloadProgress('封面下载', '正在准备下载...');
                    
                    // 模拟下载过程
                    setTimeout(() => {
                        // 这里应该是实际的封面图片下载
                        getAlbumPic(song.pic_id, song.source).then(url => {
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = `${song.name} - ${song.artist} - 封面.jpg`;
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            
                            hideDownloadProgress();
                            showSuccess('封面下载成功！');
                        }).catch(() => {
                            hideDownloadProgress();
                            showError('下载失败，无法获取封面');
                        });
                    }, 2000);
                } catch (error) {
                    console.error('下载封面时出错:', error);
                    hideDownloadProgress();
                    showError('下载失败，请重试');
                }
            }

            // 格式化LRC时间
            function formatLrcTime(time) {
                try {
                    const minutes = Math.floor(time / 60);
                    const seconds = Math.floor(time % 60);
                    const milliseconds = Math.floor((time % 1) * 100);
                    
                    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
                } catch (error) {
                    console.error('格式化LRC时间时出错:', error);
                    return '00:00.00';
                }
            }

            // 格式化时间
            function formatTime(seconds) {
                try {
                    const mins = Math.floor(seconds / 60);
                    const secs = Math.floor(seconds % 60);
                    return `${mins}:${secs.toString().padStart(2, '0')}`;
                } catch (error) {
                    console.error('格式化时间时出错:', error);
                    return '0:00';
                }
            }

            // 显示下载进度
            function showDownloadProgress(title, desc) {
                try {
                    downloadProgressTitle.textContent = title;
                    downloadProgressDesc.textContent = desc;
                    downloadProgress.classList.add('show');
                } catch (error) {
                    console.error('显示下载进度时出错:', error);
                }
            }

            // 隐藏下载进度
            function hideDownloadProgress() {
                try {
                    downloadProgress.classList.remove('show');
                } catch (error) {
                    console.error('隐藏下载进度时出错:', error);
                }
            }

            // 显示错误消息
            function showError(message) {
                try {
                    errorText.textContent = message;
                    errorMessage.classList.add('show');
                    
                    // 3秒后自动隐藏
                    setTimeout(() => {
                        hideError();
                    }, 3000);
                } catch (error) {
                    console.error('显示错误消息时出错:', error);
                }
            }

            // 隐藏错误消息
            function hideError() {
                try {
                    errorMessage.classList.remove('show');
                } catch (error) {
                    console.error('隐藏错误消息时出错:', error);
                }
            }

            // 显示成功消息
            function showSuccess(message) {
                try {
                    // 这里可以添加一个toast通知组件
                    // 暂时使用alert替代
                    alert(message);
                } catch (error) {
                    console.error('显示成功消息时出错:', error);
                }
            }

            // 激活开发者模式
            function activateDevMode() {
                try {
                    state.isDevMode = true;
                    devPanel.classList.add('open');
                    
                    // 更新开发者面板中的值
                    devPoints.value = state.points;
                    devVip.value = state.isVip ? 'true' : 'false';
                    devVipDays.value = state.vipExpiry ? Math.ceil((state.vipExpiry - new Date()) / (1000 * 60 * 60 * 24)) : 0;
                    toggleFreeDownloadsBtn.textContent = state.freeDownloads ? '免费下载已开启' : '免费下载已关闭';
                    
                    showSuccess('开发者模式已激活');
                } catch (error) {
                    console.error('激活开发者模式时出错:', error);
                }
            }

            // 关闭开发者面板
            function closeDevPanel() {
                try {
                    devPanel.classList.remove('open');
                } catch (error) {
                    console.error('关闭开发者面板时出错:', error);
                }
            }

            // 设置积分
            function setPoints() {
                try {
                    const points = parseInt(devPoints.value) || 0;
                    state.points = points;
                    updatePointsUI();
                    saveUserData();
                    showSuccess(`积分已设置为 ${points}`);
                } catch (error) {
                    console.error('设置积分时出错:', error);
                }
            }

            // 新增：增加积分功能
            function addPoints() {
                try {
                    const pointsToAdd = parseInt(devAddPoints.value) || 0;
                    state.points += pointsToAdd;
                    updatePointsUI();
                    saveUserData();
                    showSuccess(`成功增加 ${pointsToAdd} 积分，当前积分: ${state.points}`);
                } catch (error) {
                    console.error('增加积分时出错:', error);
                }
            }

            // 设置VIP状态
            function setVip() {
                try {
                    state.isVip = devVip.value === 'true';
                    updateVipUI();
                    saveUserData();
                    showSuccess(`VIP状态已设置为 ${state.isVip ? 'VIP' : '非VIP'}`);
                } catch (error) {
                    console.error('设置VIP状态时出错:', error);
                }
            }

            // 设置VIP天数
            function setVipDays() {
                try {
                    const days = parseInt(devVipDays.value) || 0;
                    
                    if (days === 0) {
                        state.vipExpiry = null;
                    } else {
                        const now = new Date();
                        state.vipExpiry = new Date(now.getTime() + days * 24 * 60 * 60 * 1000);
                    }
                    
                    updateVipUI();
                    saveUserData();
                    showSuccess(`VIP天数已设置为 ${days === 0 ? '永久' : days + '天'}`);
                } catch (error) {
                    console.error('设置VIP天数时出错:', error);
                }
            }

            // 设置VIP类型
            function setVipType() {
                try {
                    const type = devVipType.value;
                    let days, cost, bonus;
                    
                    switch (type) {
                        case '7':
                            days = 7;
                            cost = 600;
                            bonus = 100;
                            break;
                        case '30':
                            days = 30;
                            cost = 850;
                            bonus = 450;
                            break;
                        case '90':
                            days = 90;
                            cost = 1000;
                            bonus = 700;
                            break;
                        case '365':
                            days = 365;
                            cost = 1200;
                            bonus = 1000;
                            break;
                        case '0':
                            days = 0;
                            cost = 1500;
                            bonus = 1500;
                            break;
                        case 'custom':
                            showCustomVipPanel();
                            return;
                    }
                    
                    exchangeVip(days, cost, bonus);
                } catch (error) {
                    console.error('设置VIP类型时出错:', error);
                }
            }

            // 切换免费下载
            function toggleFreeDownloads() {
                try {
                    state.freeDownloads = !state.freeDownloads;
                    toggleFreeDownloadsBtn.textContent = state.freeDownloads ? '免费下载已开启' : '免费下载已关闭';
                    saveUserData();
                    showSuccess(`免费下载已${state.freeDownloads ? '开启' : '关闭'}`);
                } catch (error) {
                    console.error('切换免费下载时出错:', error);
                }
            }

            // 重置任务
            function resetTasks() {
                try {
                    state.dailyCheckinDone = false;
                    state.listenTimeToday = 0;
                    state.shareTaskDone = false;
                    state.favoriteTaskDone = false;
                    state.listenPointsEarnedToday = 0;
                    
                    updateTasksUI();
                    saveUserData();
                    showSuccess('所有任务已重置');
                } catch (error) {
                    console.error('重置任务时出错:', error);
                }
            }

            // 初始化应用
            initApp();
        });
    </script>
</body>
</html>